Contents
태그의 핵심블락인라인바디marginpaddingbox-sizin: border-box 바디 인라인 예시(설명)돔과 바인딩에 대해서@이런것도 있다@시작시맨틱 태그 1. 우리는 해더, 매인으로 둘거다 박스 2개로섹션부분2. 백그라운드 사진 넣기3. flex 사용4. 메뉴 넣기궁금한 점5. 이제 menu에 flex주기position 종류1. stataic 2. relative3. absolute4. fixed위치 이동하고 싶으면렐러티브 준 애와 앱솔루트 준 애 같이 움직이기 (없어도 됨! 알아서 잘 움직임)중요 인라인, 블락, 인라인블락!6. 서치 폼 디자인, 위치7. 디자인 테이블로 만들거임중요 읽어라!8. 이제 검색 버튼 만들기9. 이제 디자인10. 아래부분 넣기여기는 집 가서 마저 하자 그림 파일이 없으니까 힘듬…시작마지막 style부분 css파일에 넣고 link:css로 저장해주기톰켓 같은 거임 Live Server다운
2가지 개념? 그 중 하나가 태그 말하는거 같은데
dic ul li 등 태그의 목적은 논문 형식으로
브라우저는 html 해석해서 랜더링 역할
태그 사용하면 툴에 의존하지 않아도 됨
태그의 핵심
블락
행의 끝까지 차지한다
div같이
만약 block태그를 가진 2개의 사진이 있다 하면 2줄로 표시된다
인라인
자기 위치 만큼 차지 한다
img
바디
해당 HTML 문서의 텍스트, 하이퍼링크, 이미지, 리스트 등과 같은 모든 콘텐츠를 포함하는 영역을 정의할 때 사용한다.
즉 전제 영역이다
margin
테두리(border)와 이웃하는 요소 사이의 간격인 마진 영역의 크기를 설정합니다.
이러한 마진 영역은 패딩 영역과는 달리 background-color 속성으로 설정하는 배경색의 영향을 받지 않습니다.
padding
내용(content)과 테두리(border) 사이의 간격인 패딩 영역의 크기를 설정합니다.
이러한 패딩 영역은 background-color 속성으로 설정하는 배경색의 영향을 함께 받습니다.
바디 입장에서는 안에 있어서
모두 무효화 시키고 해야 함(내가 원치 않는 마진이나 패딩이 생겨서)
이거 해야지 안 뜬다
head 사이 style만들고 사이에 넣으면 다
*{ padding: 0px margin: 0px box-sizin: border-box; }
이 설정을 안주면 뜬다!
box-sizin: border-box
이거를 해줘야 전부 마진 보더 패딩까지 다 합친게 모양이다
설정 안 하고 높이를 200 했으면 margin, border, padding크기를 제외하고 내용의 크기만 200이다
하지만 설정 했다면 모두 다 합쳐서 200이다
예시
<style>
.img_block{display: block;}
</style>
만약 이미지한테 height를 200을 줬어
마진 패딩 보더 다 합쳐서 200을 잡을 건지 아니면 그림만 200잡을 건지 설정해야함
height : 200px
border: 10px
바디 인라인 예시
만약 블락인 사진 4장이 있는데 아래쪽 2장은 한줄로 만들고 싶어
→ 클래스를 준다
<img class = “img_block” src =”주소”>
그러면 css는 id를 쓰지 않는다. (유일한 하나의 돔을 줄 때 (통신? 바인딩?))
→
CSS에서 ID를 사용하지 않는 이유는 주로 재사용성과 유지 보수성 때문입니다. 클래스를 사용하면 여러 요소에 동일한 스타일을 적용할 수 있고, 더 유연한 스타일링이 가능합니다.
(설명)돔과 바인딩에 대해서@
돔, 바인딩에 대해서이런것도 있다@
시작
body에 div 2개 만든다
시맨틱 태그
단어 그 자체에는 ‘의미의, 의미론적인’ 라는 뜻이 담겨있습니다. 이로 유추해보았을 때, 시맨틱 태그는 태그 내용에 의미를 부여하는 태그라고 할 수 있습니다.
즉 div 대신에 다른 이름을 적어도 괜찮다!
div박스마다 이름을 바꿔 주려고 class 이름준다
해더라면 해더라고 해주고 디자인은 div 이름만 바꿔준다
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>
<header>
<nav></nav>
<section></section>
</header>
<main>
main
</main>
</body>
</html>이 코드는 크게 아래 위로 나눈 것 위에가 해더, 아래가 main
이래됨
섹션부분
역기서
안 부분
나중에 부트스트랩으로 할거임 css 디자인 해주는 프레임 워크다
애는 자기가 만든 클래스 쓰라고 하는 거임 → 트위터에서 만든 프레임 워크다
2. 백그라운드 사진 넣기
html은 자동으로 옆으로 간다
- 종이가 있을 때 (이미지 있을 때 ) 덧대야 한다
- 그래서 이미지를 백그라운드로 넣을 것이다.
2.1 백그라운드 사진 넣기
<!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>
header{
background-image: url("/images/background.jpg");
}
</style>
</head>
<body>
<header>
<nav>
<div class="logo">로고</div>
<div class="menu">메뉴</div>
</nav>
<section>
<div class="form__search"></div>
</section>
</header>
<main>
main
</main>
</body>
</html>2.2 사진 사이즈 정하기 (너비, 높이)
background-size: 100% 100%;height: 880px; 높이 정해주기
<!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%;
}
</style>
</head>
<body>
<header>
<nav>
<div class="logo">로고</div>
<div class="menu">메뉴</div>
</nav>
<section>
<div class="form__search"></div>
</section>
</header>
<main>
main
</main>
</body>
</html>
nav 감싸고 있는 부모
3. flex 사용
display: flex;
안에 있는 애들이 가로로 배치가 된다!
inline으로 하면 똑같은 데 왜 이렇게 할까?
.logo{ display: linline; } .menu{ display: linlne; }
- 한번에 줄 수 있다
- 배치를 선택할 수 있다 (justify-content: end;) center
이렇게 된다
around하면
우리는 between으로 할거임
around, evenly 차이
space-evenly: 모든 항목 사이와 컨테이너의 양 끝에 있는 간격이 균등하게 분배됩니다.
space-around: 항목들 사이의 간격은 동일하지만, 양 끝의 간격은 항목들 사이의 간격보다 절반만큼 작습니다.
코드
<!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;
}
</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>
</nav>
<section>
<div class="form__search"></div>
</section>
</header>
<main>
main
</main>
</body>
</html>4. 메뉴 넣기
<div class="menu">
<div>호스트가 되어보세요</div>
<div>도움말</div>
<div>회원가입</div>
<div>로그인</div>
</div>궁금한 점
- 왜 nav 앞에 .을 찍으면 화면에 안 나오고 menu앞에는 .을 찍어야 하는 걸까?
- CSS에서
.기호는 클래스 선택자를 나타냅니다 nav는 클래스가 아니고 태그이며 menu는 클래스이기 때 - id 찾으려면 #을 앞에 붙여주면 된다
- 태그는 태그명만 적으면 된
5. 이제 menu에 flex주기
.menu{ display: flex; }
자리 위치 검사하기
flex가 좋은 점은 자식 크기에 따라 크기가 딱딱 늘어남
이러면 메뉴 안에 있는 div만 설정할 수 있다!!
오른쪽만 설정
margin-right: 30px;
12시 3시 6시 9시
0px, 0px, 0px, 0px 할 때
만약 자식 부분 부분 주고 싶다면
만약 메뉴의 바로 자식에게만 먹이고 싶잖아 장남한만
이 때는
.meun>div{
}
꺽쇠를 붙이지 않으면 메뉴의 모든 자식에게 다 설정된다!
폰트 크기
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>position 종류
1. stataic
기본
2. relative
요소를 일반적인 문서 흐름에 따라 배치한 후, 자신을 기준으로 top, right, bottom, left 의 값에 따라 이동한다. 이때 이동한 위치는 다른 요소에 영향을 주지 않습니다. 따라서 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같다.
3. absolute
요소를 문서 상에서 위치를 지정한 부모 요소를 기준으로 배치한다. 부모 요소가 없는 경우에는 문서(body)를 기준으로 배치한다.
기존 도화지에 덧댄다
추가 설명 → 속성이 스태틱이면 옆으로 가던가 밑으로 가는데 새로운 박스 만들 때
앱솔루트 라는 속성을 주면
기존 도화지에서 안 놀고 다른 도화지에서 논다. 덧댄다
4. fixed
스크롤을 내려도 같은자리에 있다
브라우저 입장에서는 그대로 있는거임 → 포지션 픽스 속성
위치 이동하고 싶으면
렐러티브 속성을 가져야 한다 거리를 둘 수 있다
그러면 마진을 주면 안됨? 그래도 괜찮지만 괜찮음…
렐러티브 준 애와 앱솔루트 준 애 같이 움직이기 (없어도 됨! 알아서 잘 움직임)
앱솔루트 주는 애한테 렐러티브 준 애 같이 움직이게 할 수 있다.
- 렐러티브 속성 주고 그 안에 박스한테 absoulte속성 주면 움직여 준다
중요 인라인, 블락, 인라인블락!
인라인 크기만큼 차지
블락 옆까지
인라인블락 안에 품지 않아도 크기 그대로 줄 수 있다.
6. 서치 폼 디자인, 위치
<!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;
background-color: white;
height: 500px;
border-radius: 6px;
padding: 20px 30px; /* 가로 세로 */
box-shadow: 0 4px 4px 0 rgb(214, 214, 214); /* 그림자 */
}
</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>
7. 디자인 테이블로 만들거임
<!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;
background-color: white;
height: 500px;
border-radius: 6px;
padding: 20px 30px; /* 가로 세로 */
box-shadow: 0 4px 4px 0 rgb(214, 214, 214); /* 그림자 */
}
</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>특색 있는 숙소와 즐길거리를 예약하세요.</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></div>
</div>
</section>
</header>
<main>
main
</main>
</body>
</html>화면
중요 읽어라!
기본 배치는 부모가 있어야 한다 스스로는 못한다!
움직일 수 는 있겠지만 감싸는 애가 무한하니까
8. 이제 검색 버튼 만들기
<div> <button>검색</button> </div>
9. 이제 디자인
테이블 먼저 할거임
크기 작아서 키우자
table{
width: 100%;
}input__search
.input__search{
height: 45px;
width: 100%;
color: rgb(100,100,100);
font-size: 15px;
border: 1px solid rgb(230, 230, 230);
}subtitle__search
.button__search{ background-color: #ff5a5f; color: white; width: 70px; height: 45px; font-size: 15px; font-weight: 700; border-radius: 6px; border: 0px; cursor: pointer;/* 손가락 모양 */ } .button__box{ display: flex; justify-content: end; height: 100px; align-items: center; /* height가 있어야 한다! 세로 정렬 justin-itemns*/ }
height를 지워야 한다!
왜 height를 지워야 하는가?
→ height를 붙이면 강제 크기를 맞춘다
하지만 붙이지 않으면 밖 박스는 안에 있는 크기에 맞춰 알아서 크기가 커진다! 그래서 여기서는 지워야 한다!
윗 부분 전체 코드
<!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;
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;
}
.title__search{
font-size: 30px;
font-weight: 800;
padding: 10px 0px;
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: 0px;
cursor: pointer;/* 손가락 모양 */
}
.button__box{
display: flex;
justify-content: end;
height: 100px;
align-items: center; /* height가 있어야 한다! 세로 정렬 justin-itemns*/
}
</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>현 상황
10. 아래부분 넣기
이게 제일 큰 박스
비율할 때는 그리드가 좋다 각기 다른 크기로 하고 싶다면 그리드를 사용하자
지금까지
<!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;
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;
}
.title__search{
font-size: 30px;
font-weight: 800;
padding: 10px 0px;
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: 0px;
cursor: pointer;/* 손가락 모양 */
}
.button__box{
display: flex;
justify-content: end;
height: 100px;
align-items: center; /* height가 있어야 한다! 세로 정렬 justin-itemns*/
}
main{
display: flex;
justify-content: center;
}
main>div{
width: 80%;
}
.card__img{
height: 70px;
object-fit: cover;
}
.card__box{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 5px; /* 사이 사이 간격을 늘려줌 */
}
.card{
display: flex;
border: 1px solid rgb(210, 210, 210);
border-radius: 6px;
box-shadow: 0 0 3px 0 rgb(170, 170, 170);
}
.sec__content{
padding-left: 10px;
display: flex;
align-items: center;
justify-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>
<div>
<section>
<div class="sec__title">에어비앤비 둘러보기</div>
<div class="card__box">
<div class="card">
<div><img class="card__img" src="/images/card1.jpg"></div>
<div class="sec__content">숙소 및 부티크 호텔</div>
</div>
<div class="card">
<div><img class="card__img" src="/images/card2.jpg"></div>
<div class="sec__content">트립</div>
</div>
<div class="card">
<div><img class="card__img" src="/images/card3.jpg"></div>
<div class="sec__content">어드벤처</div>
</div>
<div class="card">
<div><img class="card__img" src="/images/card4.jpg"></div>
<div class="sec__content">레스토랑</div>
</div>
</div>
</section>
</div>
</main>
</body>
</html>여기는 집 가서 마저 하자 그림 파일이 없으니까 힘듬…
시작
- span
인라인임
최종
<!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;
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;
}
.title__search{
font-size: 30px;
font-weight: 800;
padding: 10px 0px;
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: 0px;
cursor: pointer;/* 손가락 모양 */
}
.button__box{
display: flex;
justify-content: end;
height: 100px;
align-items: center; /* height가 있어야 한다! 세로 정렬 justin-itemns*/
}
main{
display: flex;
justify-content: center;
}
.container{
width: 80%;
}
.card__img{
height: 70px;
object-fit: cover;
}
.card__box{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 5px; /* 사이 사이 간격을 늘려줌 */
}
.card{
display: flex;
border: 1px solid rgb(210, 210, 210);
border-radius: 6px;
box-shadow: 0 0 3px 0 rgb(170, 170, 170);
}
.sec__content{
padding-left: 10px;
display: flex;
align-items: center;
justify-items: center;
}
.sec__title{
font-size: 25px;
font-weight: 800;
color: rgb(68,66,66);
margin: 20px 0px;
}
.sec__content{
padding-left: 10px;
display: grid;
align-items: center;
font-weight: 600;
}
.home__box{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 10px;
}
.home__img>img{
width: 100%;
object-fit: cover;
}
.info1{
margin-top: 5px;
font-size: 13px;
color: gray;
}
.info2{
font-size: 18px;
font-weight: 600;
color: rgb(60, 60, 60);
}
.star{
font-size: 12px;
color: rgb(30, 120, 120);
font-weight: 800;
}
.count,
.type{
font-size: 12px;
}
</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>
<div class="container">
<section>
<div class="sec__title">에어비앤비 둘러보기</div>
<div class="card__box">
<div class="card">
<div><img class="card__img" src="/images/card1.jpg"></div>
<div class="sec__content">숙소 및 부티크 호텔</div>
</div>
<div class="card">
<div><img class="card__img" src="/images/card2.jpg"></div>
<div class="sec__content">트립</div>
</div>
<div class="card">
<div><img class="card__img" src="/images/card3.jpg"></div>
<div class="sec__content">어드벤처</div>
</div>
<div class="card">
<div><img class="card__img" src="/images/card4.jpg"></div>
<div class="sec__content">레스토랑</div>
</div>
</div>
</section>
<section>
<div class="sec__title">전 세계 숙소</div>
<div class="home__box">
<div class="home">
<div class="home__img">
<img src="/images/home1.png">
</div>
<div class="info1">오두막 BALIAN BEACH, BALI</div>
<div class="info2">BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span class="star">★★★★★</span>
<span class="count">185</span>
<span class="type">슈퍼호스트</span>
</div>
</div>
<div class="home">
<div class="home__img">
<img src="/images/home2.png">
</div>
<div class="info1">오두막 BALIAN BEACH, BALI</div>
<div class="info2">BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span class="star">★★★★★</span>
<span class="count">185</span>
<span class="type">슈퍼호스트</span>
</div>
</div>
<div class="home">
<div class="home__img">
<img src="/images/home3.png">
</div>
<div class="info1">오두막 BALIAN BEACH, BALI</div>
<div class="info2">BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span class="star">★★★★★</span>
<span class="count">185</span>
<span class="type">슈퍼호스트</span>
</div>
</div>
<div class="home">
<div class="home__img">
<img src="/images/home4.png">
</div>
<div class="info1">오두막 BALIAN BEACH, BALI</div>
<div class="info2">BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span class="star">★★★★★</span>
<span class="count">185</span>
<span class="type">슈퍼호스트</span>
</div>
</div>
<div class="home">
<div class="home__img">
<img src="/images/home5.png">
</div>
<div class="info1">오두막 BALIAN BEACH, BALI</div>
<div class="info2">BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span class="star">★★★★★</span>
<span class="count">185</span>
<span class="type">슈퍼호스트</span>
</div>
</div>
<div class="home">
<div class="home__img">
<img src="/images/home6.png">
</div>
<div class="info1">오두막 BALIAN BEACH, BALI</div>
<div class="info2">BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span class="star">★★★★★</span>
<span class="count">185</span>
<span class="type">슈퍼호스트</span>
</div>
</div>
<div class="home">
<div class="home__img">
<img src="/images/home7.png">
</div>
<div class="info1">오두막 BALIAN BEACH, BALI</div>
<div class="info2">BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span class="star">★★★★★</span>
<span class="count">185</span>
<span class="type">슈퍼호스트</span>
</div>
</div>
<div class="home">
<div class="home__img">
<img src="/images/home8.png">
</div>
<div class="info1">오두막 BALIAN BEACH, BALI</div>
<div class="info2">BALIAN TREEHOUSE w beautiful pool</div>
<div>
<span class="star">★★★★★</span>
<span class="count">185</span>
<span class="type">슈퍼호스트</span>
</div>
</div>
</div>
</section>
</div>
</main>
</body>
</html>결과 사진
마지막 style부분 css파일에 넣고 link:css로 저장해주기
/css/style.css
여기서의 처음 / 는 airbnb_sample
Share article
