[웹사이트 만들기] airbnb 웹 화면 만들기 (header) (2)

HTML, CSS 와 함께 airbnb 웹사이트 메인 화면의 header 부분 만들기 (2)

mmmmmm02

Aug 28, 2024

Contents

<header> 중앙 <selection>potision 속성의 주요 값들

<header> 중앙 <selection>

아래의 전체 화면 header 중 로고와 메뉴가 있는 <nav> 를 완성했다면,

아래의 검색창 <selection> 을 만들어보자.

potision 속성의 주요 값들

CSS의 position 속성은 요소의 위치를 지정하는 데 사용되며, 다양한 레이아웃을 구성하는 중요한 속성이다. position 속성은 요소가 문서 내에서 어떻게 배치되는지를 결정하며, 이 속성의 값에 따라 요소의 배치 방식이 달라진다.

1. static (기본값)

HTML 요소는 기본적으로 position: static; 이다.

2. relative

움직이는거 ^^

3. fixed

브라우저 창을 기준으로 고정되어 배치된다.

position fixed 속성은 스크롤을 내려도 그 자리에, 브라우저 입장에선 그 위치 그대로 있음

아래의 빨간 박스 같은 것

4. absolute

전체 속성이 static 인데,

position 속성 absolute 를 주면 그 위로 올라간다. stack 으로 위에 계속 쌓을 수 있다.

Tip. 감싸고 있는 친구를 relative 속성으로 주고, 그 안의 친구를 absolute 속성으로 주면 같이 움직인다.

inline 은 내부 크기 만큼 차지 하는 것

block 은 한 줄 끝까지 차지 하는 것

inline-block 안에 아무것도 없어도 크기를 유지하면서 흘러갈 수 있음

fixed 도 absolute 도 덧대는거지만 fixed 처럼 고정되어있지는 않음

기본 : static

움직이고 싶으면 : relative

GPT 야 고마워

검색 창을 form__search 로 잡고, CSS 로 가서 배치 먼저 시작한다.


<selection>
		<div class="form__search"></div>
</selection>

높이는 일단 임시로 넣어두자. (안을 다 채워서 크기 맞춰지면 삭제 할거임)


.form__search {
    width: 430px;
    height: 500px; 
    background-color: white;
}

margin 줘도 되지만 위에서 배운 position: relative; 를 주고, 간격과 크기를 넣어주자.


.form__search {
     position: relative;
     top: 10px;
     left: 50px;
     width: 430px;
     height: 500px;
     background-color: white;
     border-radius: 6px;
     padding: 20px 30px;
     /*가로 세로*/
     box-shadow: 0 4px 4px 0 rgb(214, 214, 214);
}

배치를 잡았으니, 글자를 넣을 차례.

글자를 넣어보면, 글자가 너무 착 붙어있다.

padding 을 이용해서 안쪽 여백을 넣어주자.

CSS 에서 위치도 잡았으니, 안의 내용을 테이블로 만들어보자.

항상 만들기 전에 어떻게 만들지 큰 범위에서 쪼개보기

타이틀과 검색 버튼를 제외한 가운데를 테이블로 만들어야 한다.

아래와 같이 써놓고, 하나씩 바꿔가면 쉽다.


 <section>
            <div class="form__search">
                <div>특색 있는 숙소와 즐길 거리를 예약하세요.</div>
                <table>
                    <tr>
                        <td colspan="2">목적지</td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input type="text" placeholder="모든 위치">
                        </td>
                    </tr>
                    <tr>
                        <td>체크인</td>
                        <td>체크아웃</td>
                    </tr>
                    <tr>
                        <td>
                            <input type="date">
                        </td>
                        <td>
                            <input type="date">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">인원</td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <select>
                                <option>인원</option>
                                <option>1</option>
                                <option>2</option>
                            </select>
                        </td>
                    </tr>
                </table>
                <div>
                    <button>검색</button>
                </div>
            </div>
        </section>

모든 배치는 부모가 있어야 한다. 자기 혼자 움직이는게 아니라, 부모가 있어야 움직일 수 있다.

내 스스로 움직여서는 배치라는 개념이 없다. 그냥 움직여서는 배치를 못한다.

검색 버튼을 만들기 전에 감싸는 박스를 먼저 만들어줘야 한다.


<section>
            <div class="form__search">
                <div class="title__search">특색 있는 숙소와 즐길 거리를 예약하세요.</div>
                <table>
                    <tr>
                        <td colspan="2" class="sub__title__search">목적지</td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input class="input__search" type="text" placeholder="모든 위치">
                        </td>
                    </tr>
                    <tr>
                        <td class="sub__title__search">체크인</td>
                        <td class="sub__title__search">체크아웃</td>
                    </tr>
                    <tr>
                        <td>
                            <input type="date" class="input__search">
                        </td>
                        <td>
                            <input type="date" class="input__search">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" class="sub__title__search">인원</td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <select class="input__search">
                                <option>인원</option>
                                <option>1</option>
                                <option>2</option>
                            </select>
                        </td>
                    </tr>
                </table>
                <div>
                    <button class="button__search">검색</button>
                </div>
            </div>
        </section>

마우스 우클릭 > 검사 에서 테이블의 크기를 볼 수 있다.

테이블 크기를 먼저 넓혀줘야, 안의 애들도 늘릴 수 있으니까 먼저 넓혀준다.


table {
    width: 100%; /*얘가 늘어나야 안에 있는 애들을 늘리니까 먼저 넓힘*/
}

그리고 안의 친구들을 이쁘게 크기 조정해주기 ^^

버튼도 이쁘게 만들어줘야지^^


.button__search {
            background-color: #FF5A5F;
            color: white;
            width: 70px;
            height: 45px;
            font-size: 15px;
            font-weight: 700;
            border-radius: 6px;
            border: 0;
            cursor: pointer;
}

전체적인 구조를 알아야 찾아서라도 할 수 있다.


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        header {
            background-image: url("/images/background.jpg");
            height: 880px;
            background-size: 100% 100%;
        }

        nav {
            display: flex;
            justify-content: space-between;
            padding: 20px;
        }

        .logo {
            color: white;
            font-size: 35px;
            font-weight: 800;
        }

        .menu {
            display: flex;
        }

        .menu>div {
            margin-right: 30px;
            color: white;
            font-weight: 800;
        }

        .form__search {
            position: relative;
            top: 10px;
            left: 50px;
            width: 430px;
            /*height: 500px; 이젠 지워도 됨*/
            background-color: white;
            border-radius: 6px;
            padding: 20px 30px;
            /*가로 세로*/
            box-shadow: 0 4px 4px 0 rgb(214, 214, 214);
        }
        
        table {
            width: 100%; /*얘가 늘어나야 안에 있는 애들을 늘리니까 먼저 넓힘*/
        }

        .input__search {
            height: 45px;
            width: 100%;
            color: rgb(100, 100, 100);
            font-size: 15px;
            border: 1px solid rgb(230, 230, 230);
        }

        .sub__title__search {
            font-size: 12px;
            font-weight: 600;
            padding: 10px 0px; /*너무 붙어있는 애 띄워줌, 가로는 패딩안줄거라 0 */
        }

        .title__search {
            font-size: 30px;
            font-weight: 800; /*진하기*/
            padding: 10px 0px; /*아래 위로 padding 넣어주기*/
            color: rgb(75, 75, 75)
        }

        .button__search {
            background-color: #FF5A5F;
            color: white;
            width: 70px;
            height: 45px;
            font-size: 15px;
            font-weight: 700;
            border-radius: 6px;
            border: 0;
            cursor: pointer;
        }

        .button__box {
            height: 60px;
            display: flex; /*사용해서 끝으로 보내기*/
            justify-content: end; /*가로 정렬*/
            align-items: center; /*세로 정렬*/
        }

    </style>
</head>

<body>
    <header>
        <nav>
            <div class="logo">
                <svg viewBox="0 0 1000 1000" role="presentation" aria-hidden="true" focusable="false"
                    style="height: 1em; width: 1em; display: inline-block; fill: currentcolor;">
                    <path
                        d="m499.3 736.7c-51-64-81-120.1-91-168.1-10-39-6-70 11-93 18-27 45-40 80-40s62 13 80 40c17 23 21 54 11 93-11 49-41 105-91 168.1zm362.2 43c-7 47-39 86-83 105-85 37-169.1-22-241.1-102 119.1-149.1 141.1-265.1 90-340.2-30-43-73-64-128.1-64-111 0-172.1 94-148.1 203.1 14 59 51 126.1 110 201.1-37 41-72 70-103 88-24 13-47 21-69 23-101 15-180.1-83-144.1-184.1 5-13 15-37 32-74l1-2c55-120.1 122.1-256.1 199.1-407.2l2-5 22-42c17-31 24-45 51-62 13-8 29-12 47-12 36 0 64 21 76 38 6 9 13 21 22 36l21 41 3 6c77 151.1 144.1 287.1 199.1 407.2l1 1 20 46 12 29c9.2 23.1 11.2 46.1 8.2 70.1zm46-90.1c-7-22-19-48-34-79v-1c-71-151.1-137.1-287.1-200.1-409.2l-4-6c-45-92-77-147.1-170.1-147.1-92 0-131.1 64-171.1 147.1l-3 6c-63 122.1-129.1 258.1-200.1 409.2v2l-21 46c-8 19-12 29-13 32-51 140.1 54 263.1 181.1 263.1 1 0 5 0 10-1h14c66-8 134.1-50 203.1-125.1 69 75 137.1 117.1 203.1 125.1h14c5 1 9 1 10 1 127.1.1 232.1-123 181.1-263.1z">
                    </path>
                </svg>
            </div>
            <div class="menu">
                <div>호스트가 되어보세요</div>
                <div>도움말</div>
                <div>회원가입</div>
                <div>로그인</div>
            </div>
        </nav>
        <section>
            <div class="form__search">
                <div class="title__search">특색 있는 숙소와 즐길 거리를 예약하세요.</div>
                <table>
                    <tr>
                        <td colspan="2" class="sub__title__search">목적지</td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input class="input__search" type="text" placeholder="모든 위치">
                        </td>
                    </tr>
                    <tr>
                        <td class="sub__title__search">체크인</td>
                        <td class="sub__title__search">체크아웃</td>
                    </tr>
                    <tr>
                        <td>
                            <input type="date" class="input__search">
                        </td>
                        <td>
                            <input type="date" class="input__search">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" class="sub__title__search">인원</td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <select class="input__search">
                                <option>인원</option>
                                <option>1</option>
                                <option>2</option>
                            </select>
                        </td>
                    </tr>
                </table>
                <div class="button__box">
                    <button class="button__search">검색</button>
                </div>
            </div>
        </section>
    </header>
    <main>
        main
    </main>    
</body>

</html>

See more posts

[웹사이트 만들기] airbnb 웹 화면 만들기 (header) (2)

<header> 중앙 <selection>

potision 속성의 주요 값들

1. static (기본값)

2. relative

3. fixed

4. absolute

More articles

[웹사이트 만들기] airbnb 웹 화면 만들기 (main) (2)

[웹사이트 만들기] airbnb 웹 화면 만들기 (main) (1)

[웹사이트 만들기] airbnb 웹 화면 만들기 (header) (1)

[HTML / CSS ] 기초