![[웹사이트 만들기] airbnb 웹 화면 만들기 (header) (1)](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2024-08-28T15%3A38%3A25.968Z-8611552f-b877-4e51-9b4d-1285dc7fa6d0&w=3840&q=75)
Contents
<header> 상단 <nav>구조화가 먼저 되어야 디자인을 할 수 있다.
HTML 과 CSS 를 병행할건데, CSS 는 일단 <head> 태그 안에 <style> 태그로 넣어서 쓰자. (나중에 .css 파일로 뺄 것)
시맨틱 Semantic 태그를 이용해 볼 것.
시맨틱 태그는 HTML의 구조를 설계하는데 있어 태그에 의미를 부여함으로써 웹사이트의 구조를 파악하기 쉽도록 도와주기 위해 만들어진 것 (div 대신 → header 와 main 으로 사용 할 수 있음)
아래는 만들어 볼 <header> 화면이다.
<header> 상단 <nav>
해당 전체 화면을 header 로 잡고,
<nav> 와 <section> 이라는 두 구간으로 나누고 시작한다.
<nav> 안에 ‘로고’ 와 ‘메뉴’ 를 먼저 넣고, 위치를 잡아보자.
Bootstrap 컨벤션
트위터에서 개발한 오픈 소스 프론트엔드 프레임워크, CSS 에서 사용 할 수 있다.
이건 부트스트랩 컨벤션
btn-~~
form-search
이미 세상에 만들어진 라이브러리의 css 이름과 충돌할 우려가 있으니, 우리는 하이픈을 사용하지 않고, 다르게 하여야 한다.
<div class="form__search"></div><section> 안의 검색창은 form__search 라는 클래스로 만들어 놓는다.
이제 배경 이미지를 넣어보자.
<img src=””> 를 넣으면, 그 다음 이미지를 넣는 경우 옆으로 들어가고, stack 으로 쌓아서 만드는 방법도 있지만 지금은 편의상 백그라운드로 넣어서 해보자.
사진 url 은 상대경로(./ 현재폴더 위치) 가 아닌 절대경로로 넣어주어야 나중에 <style> 을 파일로 밖으로 빼더라도 경로를 바꿔야하는 번거로움을 줄일 수 있다.
배경의 높이를 height: px 로 설정하면, 높이에 맞춰서 background-image 도 표시된다.
또한, background-size: 100% 100% 는 배경 이미지가 header 요소의 너비와 높이에 맞춰 늘어나거나 축소된다는 뜻. 이 경우, header 의 높이가 880px 이므로 배경 이미지도 그 높이에 맞게 조정된다.
실행하니 배경 이미지에 여백이 보인다.
margin 과 padding 을 0 으로 초기화하여, 여백 해결
*{ /* *는 전체 문서의 모든 요소에 스타일을 일괄적으로 적용할 때 사용하는 셀렉터. 주로 브라우저의 기본 스타일을 초기화하고, 일관된 레이아웃을 만들기 위해 사용*/
margin: 0px;
padding: 0px;
box-sizing: border-box;
}flex 를 사용하면 ‘로고’ 와 ‘메뉴’ 를 옆으로 오게 할 수 있다.
flex 는 자식들을 가로 배치 할 수 있고, 부모에게 한번에 줄 수 있다. +비율과 배치를 다 지원함
nav 안 의 자식들 ‘로고’ 와 ‘메뉴’ 를 양 옆으로 찢어보자.
justify-content: 하고 ctrl + 스페이스바 해보면 여러 개 나오는데, 그 중 space-between 사용.
flex 는 금방 슥슥 해보면 된다. flex 를 모르고 뭘 할 수는 없다.
아래와 같이 수정한 ‘메뉴’ 를 가로로 바꾸는 것 또한 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>
.menu { display: flex; }
자식의 크기에 따라 부모의 크기도 늘어난다.
.menu>div 는 class=”menu” 를 가진 요소의 직계 자식 중에서 div 요소에만 해당되게 하는 것.
.logo {
color: white;
font-size: 35px;
font-weight: 800; // 굵기
}
<!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