[HTML&CSS] 에어비앤비 메인페이지 만들기

내용수정 및 썸넬이미지 추가하기

김호정

Sep 01, 2024

Contents

1. block과 inline 2. data-set 3. 에이비엔비 메인 페이지 만들기

airbnb_sample.zip

3108.5KB

아파치 같은거임. 설치.

1. block과 inline

block - 다음 태그는 옆으로 못오고 아래로 내려감 ex ) <section> , <div>

inline - 자기 크기만큼만 차지 ex ) <a> , <img>

inline block - 안에 내용이 없어도 자기 크기만큼 차지할 수 있음

자바스크립트는 도큐먼트 라고 한다. 태그를 ?

💡

마진, 패딩을 무효화 시키고 작업해야함 margin : 0 padding : 0 box-sizing : border-box → 테두리까지 박스의 크기로 보겠다.

마진, 패딩 , 보더를 다 합쳐서 높이로 잡을 지 프론트는 설정할 수 있다.

우리도 border까지 포함해서 높이로 잡자!

💡

css는 id 안쓴다. 디자인 할때는 class 쓰기!

2. data-set

“data-” 라고 작성한 속성에 자바스크립트 코드로 접근가능

SSR 할때 data- 이런식으로 적어두면 데이터 뿌리기 편하다

HTMLElement: dataset property - Web APIs | MDN

The dataset read-only property of the HTMLElement interface provides read/write access to custom data attributes (data-*) on elements. It exposes a map of strings (DOMStringMap) with an entry for each data-* attribute.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

HTMLElement: dataset property - Web APIs | MDN

프레임워크 : 부트스트랩

3. 에이비엔비 메인 페이지 만들기

박스가 크게 2개

3.1 HTML 시멘틱 태그

시맨틱 태그란? - 태그 요소의 종류와 이점

시맨틱 태그 (Semantic Tag)는 포함된 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그를 말합니다. 이번 글을 통해 시맨틱 태그 요소의 종류와 이점까지 확인해보세요.

https://seo.tbwakorea.com/blog/what-is-semantic-tag/

css 컨벤션 정하기

search_box

search-box

searchBox

부트스트랩 컨벤션을 지켜서 이렇게 만들수도 있지만 이렇게 하지말기!

css 가져다 쓰면 class 명이 겹쳐서 적용이 안 될 수가 있다.

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

언더스코어 2개로 쓰기

이미지 백그라운드로 넣으면

스택으로 쌓는 방법을 사용할 수도 있는데 나중에 해보기

./ 는 내위치

근데 이렇게 상대경로 하지말고 절대경로로 잡아라

/는 절대경로

💡

상대경로를 사용하면 css 파일 위치를 바꾸었을때 경로를 다 수정해야하니 정대경로를 사용하자.

백그라운드로 넣을때는 background-size 사용

100% 100% 으로 하면 바둑판으로 안나오고 이미지가 화면에 꽉차게 나온다.

마진 패딩 0

box-sizing: border-box → border도 박스 크기안에 포함시킴

로고 와 메뉴를 한줄에 오게 하려면 ?

⇒ flex로 하면 안에있는 애들이 다 inline이 된다. (→ 가로로 배치됨)

💡

flex는 1. 자식 모두에게 인라인을 한번에 줄 수 있음 ( → .logo .menu 해서 각각 inline을 주는 방법도 있지만 flex가 더 간편 ) 2. 비율과 배치도 지원함

가로 배치하는 건 justify-content 인데 네모친 3개가 잘쓰인다.

space-between → 맨앞 맨끝 딱 붙는다.

space-around → 양옆에 여백이 좀 있음.

💡

이제는 float 이런거 잘 안쓰고 flex를 쓰는 추세 ! W3Schools 에서 flex 연습 !

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.

https://www.w3schools.com/css/css3_flexbox.asp

로고 svg

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>

→ “백터 이미지“ 라고 함 (→ 애는 화질에 영향을 받지 않음)

→ logo div 안에 추가하기

<div>호스트가 되어보세요</div>

이런건 div 말고 span을 사용해서 한줄로 나오도록 할 수도 있다.

하지만 플렉스하면 “배치”를 할 수있다.

→ 그러니 span을 사용하지 말고 display: flex 사용해서 inline 으로 배치하자.

margin

0px 0px 0px 0px

12시 3시 6시 9시

방향으로 적용된다.