[Project] 에어비앤비 사이트 클론 코딩

swing·2021년 2월 14일
1

[Project]

목록 보기
1/4
post-thumbnail

에어비엔비 사이트 클론코딩 (정적기능만 구현)


알게된 내용

👉 HTML

  • Html semantic tag
  • SVG
  • div와 span, ul을 이용하여 element의 block,inline등의 속성을 알게 되었다.
  • chrome developer tool의 사용법을 익혔다.

👉 CSS

  • Box-sizing(border-box와 content-box의 차이점)

  • Reset.css를 복붙해서만 사용했는데, 그 안의 속성 변화를 자세히 살펴보고 이해했다.

  • flex 디자인

  • flex에서 direction지정, align-items,justify-content가 어떻게 적용되는지 이해했다.

  • background의 속성

  • Position absolute,relative,fixed등의 차이점

  • Box model에서의 속성 (패딩,마진) 등을 이용해 어떻게 간격을 넣는지와 차이점을 알게되었다.

  • css 캐스캐이딩 : css selector의 우선 순위

  • css variables : css내에서의 속성 지정을 위한 개체 (마치 변수처럼 선언해서 사용)

  • 반응형 웹을 만들다 보니 %,em,rem의 차이점을 알게 되었다.

    Em : 부모의 사이즈에 반응

    Rem : root em , 절대적인 사이즈에 반응


👉 에어비앤비 클론 사이트 스크린샷

profile
if(기록📝) 성장🌱

0개의 댓글