HTMLCSS

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

HTML, CSS 와 함께 airbnb 웹사이트 메인 화면의 header 부분 만들기 (1)
mm
mmmmmm02
Aug 28, 2024
[웹사이트 만들기] airbnb 웹 화면 만들기 (header) (1)
Contents
<header> 상단 <nav>
 
구조화가 먼저 되어야 디자인을 할 수 있다.
HTML 과 CSS 를 병행할건데, CSS 는 일단 <head> 태그 안에 <style> 태그로 넣어서 쓰자. (나중에 .css 파일로 뺄 것)
 
시맨틱 Semantic 태그를 이용해 볼 것.
시맨틱 태그는 HTML의 구조를 설계하는데 있어 태그에 의미를 부여함으로써 웹사이트의 구조를 파악하기 쉽도록 도와주기 위해 만들어진 것 (div 대신 → header 와 main 으로 사용 할 수 있음)
notion image
시맨틱 태그란? - 태그 요소의 종류와 이점
시맨틱 태그 (Semantic Tag)는 포함된 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그를 말합니다. 이번 글을 통해 시맨틱 태그 요소의 종류와 이점까지 확인해보세요.
시맨틱 태그란? - 태그 요소의 종류와 이점
https://seo.tbwakorea.com/blog/what-is-semantic-tag/
시맨틱 태그란? - 태그 요소의 종류와 이점
 
아래는 만들어 볼 <header> 화면이다.

<header> 상단 <nav>

 
해당 전체 화면을 header 로 잡고,
<nav> 와 <section> 이라는 두 구간으로 나누고 시작한다.
 
notion image
 
 
notion image
 
<nav> 안에 ‘로고’ 와 ‘메뉴’ 를 먼저 넣고, 위치를 잡아보자.
 
notion image
 

Bootstrap 컨벤션

 
트위터에서 개발한 오픈 소스 프론트엔드 프레임워크, CSS 에서 사용 할 수 있다.
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
W3Schools.com
https://www.w3schools.com/bootstrap5/index.php
W3Schools.com
이건 부트스트랩 컨벤션
💡
btn-~~ form-search
 
이미 세상에 만들어진 라이브러리의 css 이름과 충돌할 우려가 있으니, 우리는 하이픈을 사용하지 않고, 다르게 하여야 한다. 
<div class="form__search"></div>
 
<section> 안의 검색창은 form__search 라는 클래스로 만들어 놓는다.
 
notion image
 
이제 배경 이미지를 넣어보자.
<img src=””> 를 넣으면, 그 다음 이미지를 넣는 경우 옆으로 들어가고, stack 으로 쌓아서 만드는 방법도 있지만 지금은 편의상 백그라운드로 넣어서 해보자.
 
사진 url 은 상대경로(./ 현재폴더 위치) 가 아닌 절대경로로 넣어주어야 나중에 <style> 을 파일로 밖으로 빼더라도 경로를 바꿔야하는 번거로움을 줄일 수 있다.
 
notion image
notion image
 
배경의 높이를 height: px 로 설정하면, 높이에 맞춰서 background-image 도 표시된다. 또한, background-size: 100% 100% 는 배경 이미지가 header 요소의 너비와 높이에 맞춰 늘어나거나 축소된다는 뜻. 이 경우, header 의 높이가 880px 이므로 배경 이미지도 그 높이에 맞게 조정된다.
notion image
 
실행하니 배경 이미지에 여백이 보인다.
notion image
 
margin 과 padding 을 0 으로 초기화하여, 여백 해결 
*{ /* *는 전체 문서의 모든 요소에 스타일을 일괄적으로 적용할 때 사용하는 셀렉터. 주로 브라우저의 기본 스타일을 초기화하고, 일관된 레이아웃을 만들기 위해 사용*/
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
 
flex 를 사용하면 ‘로고’ 와 ‘메뉴’ 를 옆으로 오게 할 수 있다.
flex 는 자식들을 가로 배치 할 수 있고, 부모에게 한번에 줄 수 있다. +비율과 배치를 다 지원함
notion image
nav 안 의 자식들 ‘로고’ 와 ‘메뉴’ 를 양 옆으로 찢어보자.
justify-content: 하고 ctrl + 스페이스바 해보면 여러 개 나오는데, 그 중 space-between 사용.
flex 는 금방 슥슥 해보면 된다. flex 를 모르고 뭘 할 수는 없다.
notion image
 
아래와 같이 수정한 ‘메뉴’ 를 가로로 바꾸는 것 또한 flex 를 쓰면 된다.
<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>
notion image
.menu {
     display: flex;
}
notion image
 
자식의 크기에 따라 부모의 크기도 늘어난다.
 
.menu>div 는 class=”menu” 를 가진 요소의 직계 자식 중에서 div 요소에만 해당되게 하는 것.
 
notion image
.logo {
     color: white;
     font-size: 35px;
     font-weight: 800; // 굵기 
}
notion image
 
<!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;
        }
    </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>
        </section>
    </header>
    <main>
        main
    </main>    
</body>

</html>
Share article

More articles

See more posts

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

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

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

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

[HTML / CSS ] 기초

August 28, 2024
[HTML / CSS ] 기초

[Git] Rebase merge

August 27, 2024
[Git] Rebase merge

eunmouse

RSS·Powered by Inblog