이 페이지를 HTML로 작성해보자.
우선 각 페이지를 구조화 해보자.
1. Header
우선 가장 위에 있는 이 부분을 header 라고 지칭한다.
이 부분을 나눠보자.
① header : 화면의 전체 박스
② nav : 상단 로고와 메뉴가 들어갈 박스. flex 를 통해 요소를 배치한다.
③ search-box : input 태그와 날짜, 인원 선택, 버튼이 있다. 테이블을 통해 배치한다.
④ logo : airbnb 로고. svg 주소를 붙여넣기한다.
⑤ menu : nav 박스 내의 박스로, grid 를 통해 요소를 배치한다.
2. Body
바디의 구조는 헤더에 비해 구조가 간단하다. 구간을 나눠서 사진만 배치하면 된다.
① body : 바디 태그의 전체 박스
② section : 배치할 요소들을 나누는 박스. section 박스가 반복된다.
③ card-box , img-box, home-box : 배치할 사진을 묶는 박스. grid 로 배치한다.
④ 배치할 사진과 글자들
Share article