[HTML] 화면 구성 해보기(header)

HootJem

Aug 28, 2024

Contents

1. 화면 분석 2. 스타일 지정하기 정리

vsCode 를 열어 들어가면 다음처럼 아무것도 표시 되지 않은 화면이 보입니다.

! 을 친 후 클릭하면

자동적으로 기본 템플릿을 제공합니다.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

화면에 표시되는 페이지는 <body></body> 태그 내부에서 작성할 것입니다.

1. 화면 분석

오늘 만들어 볼 페이지입니다. 윗 부분이 header, 아래 박스가 main 에 해당합니다

따라서 body 태그 내부에 header을 넣어줍니다.


<body>
    <header>

    </header>
</body>

그다음 header 부분을 살펴보면 메뉴와 예약 상자가 있는 곳으로 나누어져 있는걸 볼 수 있습니다.

이것도 태그를 추가합니다.


<body>
    <header>
        <nav>

        </nav>
        <section>
            
        </section>
    </header>
</body>

저 logo, menu, form_search 가 각각의 빨간 상자에 해당합니다.

세부 요소는 대략 이렇게 나누어집니다.

또 div 를 추가합니다.


<body>
    <header>
        <nav>
            <div class="logo">로고</div>
            <div class="menu">메뉴</div>
        </nav>
        <section>
            <div class="form__search">검색</div>
        </section>
    </header>
</body>

만약 go Live 누르셨다면 이렇게 나올텐데 아직 크기나 위치를 선정하지 않았기 때문입니다..

이제 내부의 세부 항목을 만들어야합니다.

menu 구성

호스트~ 도움말 회원가입 로그인 이 각각의 박스를 갖고 있습니다.


<div class="menu">
                <div>호스트가 되어보세요</div>
                <div>도움말</div>
                <div>회원가입</div>
                <div>로그인</div>
</div>

따라서 메뉴 글자 삭제 후 <div> 태그 내부에 작성

form_search 구성

내부가 세 부분으로 나누어져 있습니다. 검색 박스 같은 경우엔 <table> 태그로 많이 만듭니다. title div 태그로 만들겁니다.


    <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>

logo 구성

이미지가 아닌 svg 로 만들었습니다.


<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>

여기까지 하면 이렇게 화면에 나옵니다.

이제 스타일을 지정할 때가 되었습니다.

스타일은 <style> 태그 내부에서 작성하며, 태그 선택을 위해 코드에 적어놓은 class=”” 를 사용할 수 있습니다.

2. 스타일 지정하기

시작 전 스타일 초기화를 해 줍니다. 브라우저 마다 기본설정이 다르기 때문입니다.


<style>
    /* 스타일 지정 전 초기화 필수 */
    * {
        margin: 0;
        padding: 0px;
        box-sizing: border-box;
    }

</style>

그리고 대략적으로 선을 그어봅니다.


<style>
      /* 스타일 지정 전 초기화 필수 */
      * {
          margin: 0;
          padding: 0px;
          box-sizing: border-box;
      }

      header{
          border: 1px solid red;
      }

      nav{
          border: 1px solid blue;
      }

      .logo{
          border: 1px solid green;
      }

      .menu{
          border: 1px solid green;
      }

      .menu > div {
          border: 1px solid orange;
      }

  </style>

nav 부분이 가로 정렬 되어야 한다

logo 는 왼쪽, menu는 오른쪽

search 박스는 왼쪽쯤

배경 사진

적당히 차이점이 보인다.

2.1 header

목표에 비해 header 의 높이가 너무 낮고 그림도 없기때문에 넣어주겠습니다.

boder 는 레이아웃을 보기위해 임의로 넣어둔 선입니다!


header{
        border: 1px solid red;
        height: 880px;
        background-image: url("/images/background.jpg");
        background-size: 100% 100%; /*브라우저 크기 바뀌어도 자동으로 100% 가 됨*/
    }

2.2 nav

display: flex; 추가

justify-content: space-between;


nav{
    border: 1px solid blue;
    display: flex; /*가로 정렬*/
    justify-content: space-between; /*양 끝으로 떨어진다*/
    padding: 20px;
}

padding 은 애들이 바짝 붙어있어서 좀 떨어지라고 넣었습니다. 20px 만큼 벽에서 떨어집니다.

2.3 logo


.logo{
    border: 1px solid green;
    color: white;
    font-size: 35px;
    font-weight: 800; /*글자 굵기*/
}

2.4 menu


.menu{
    border: 1px solid green;
    display: flex; /*가로 정렬*/
}

.menu > div {
    border: 1px solid orange;
    margin-right: 30px; /*오른쪽 30px 여백*/
    color: white;
    font-weight: 800;
    cursor: pointer; /*마우스 커서 올렸을 때 커서 모양 변경*/
}

이렇게 nav 의 항목은 완료 되었습니다.

이제 search 부분 차례입니다.

2.5 form__search

스타일을 정해놓지 않았기 때문에 엄청 깁니다. (화면만큼 늘어나고 있을겁니다)


.form__search {
      border: 1px solid red;
      position: relative; /*이를 사용하면 top 과 left 사용하여 위치 조정이 가능함 */
      top: 10px; /*빨간 화살표 만큼 이동시킴*/
      left: 50px;
      border-radius: 6px; /*박스 끝 동글동글*/
      width: 430px; /*넓이 설정*/
      background-color: white;
      padding: 20px 30px; /*div 내부에서 해당 px 만큼 여백 설정*/
      box-shadow: 0 4px 4px 0 rgb(214, 214, 214);
  }

2.6 form 글자들


  .table{
      width: 100%;
  }

  .title__search{
      border: 1px solid green;
      font-size: 30px;
      font-weight: 800;
      padding: 10px 0;
      color: rgb(75, 75, 75);
  }

  .sub__title__search{
      border: 1px solid blue;
      font-size: 12px;
      font-weight: 600;
      padding: 10px 0;
  }

특별한 것 없이 title__search 는 초록박스, sub__title__search 는 파란박스에 해당합니다


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

input


.button__box {
    border: 1px solid green;
    height: 60px;
    display: flex;
    justify-content: end; /*가로 배치*/
    align-items: center; /* height 를 줘서 높이를 줘야 세로 배치가능*/
}

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

정리

header 가 끝났습니다.

중요한 점을 알아볼 수 있었는데요, 먼저 레이아웃에 필요한 div 혹은 시멘틱태그를 사용하여 레이아웃을 정의한 뒤

스타일 조정을 하면 된다는겁니다 😊

Contents

1. 화면 분석 2. 스타일 지정하기 정리

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>

<body> <header> <nav> <div class="logo">로고</div> <div class="menu">메뉴</div> </nav> <section> <div class="form__search">검색</div> </section> </header> </body>

<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>

<style> /* 스타일 지정 전 초기화 필수 */ * { margin: 0; padding: 0px; box-sizing: border-box; } header{ border: 1px solid red; } nav{ border: 1px solid blue; } .logo{ border: 1px solid green; } .menu{ border: 1px solid green; } .menu > div { border: 1px solid orange; } </style>

header{ border: 1px solid red; height: 880px; background-image: url("/images/background.jpg"); background-size: 100% 100%; /*브라우저 크기 바뀌어도 자동으로 100% 가 됨*/ }

.menu{ border: 1px solid green; display: flex; /*가로 정렬*/ } .menu > div { border: 1px solid orange; margin-right: 30px; /*오른쪽 30px 여백*/ color: white; font-weight: 800; cursor: pointer; /*마우스 커서 올렸을 때 커서 모양 변경*/ }

.form__search { border: 1px solid red; position: relative; /*이를 사용하면 top 과 left 사용하여 위치 조정이 가능함 */ top: 10px; /*빨간 화살표 만큼 이동시킴*/ left: 50px; border-radius: 6px; /*박스 끝 동글동글*/ width: 430px; /*넓이 설정*/ background-color: white; padding: 20px 30px; /*div 내부에서 해당 px 만큼 여백 설정*/ box-shadow: 0 4px 4px 0 rgb(214, 214, 214); }

.table{ width: 100%; } .title__search{ border: 1px solid green; font-size: 30px; font-weight: 800; padding: 10px 0; color: rgb(75, 75, 75); } .sub__title__search{ border: 1px solid blue; font-size: 12px; font-weight: 600; padding: 10px 0; }

.button__box { border: 1px solid green; height: 60px; display: flex; justify-content: end; /*가로 배치*/ align-items: center; /* height 를 줘서 높이를 줘야 세로 배치가능*/ } .button__search{ background-color: #FF5A5F; color: white; width: 70px; height: 45px; font-size: 15px; font-weight: 700;; border-radius: 6px; border: 0px; cursor: pointer; }