[Interactive Web] AirBnB 클론 코딩 해보기 ( 1)

AirBnB를 클론코딩

: airbnb를 클론코딩 해보면서 바닐라 자바스크립트로 할 수 있는 것들을 토대로 html, css, js를 복습한다는 방향으로 공부해보자.

: 먼저 위의 카테고리 header를 구현해보자.

TIL

• 항상 정중앙 정렬을 할 때(물론 transform, top, left, position 등을 사용할 수 있지만),

display: flex;
align-items: center;
justify-content: center;

를 사용했었는데, 더 약간의 보일러 플레이트(?)를 줄여주는 place-items를 알았다.

display: flex;
place-items: center;

혹은

display: grid;
place-items: center;

위의 place-items는 align-items, justify-content를 하나의 속성으로 설정해줄 때 쓰는거다. 예를 들어,

place-items: end center;

이렇게 해주면 앞은 align-items를 end로 한거고, 뒤는 justify-content를 center로 한거다.

• 임의의 배열(1~n 이렇게)을 생성하는거 제발 외우자..할 때마다 찾아보는중이다 아주 비효율적..

const arr = Array.from({length:9}, (v,i)=>i+1)); 

• white-space 관련 정리 블로그
• 가상 요소를 이용한 특이한 처리??