Skip to main content

국내 상위 K-애슬레저 자사몰인 andar 공식몰을 분석해 보고 클론 코딩을 해보았습니다.

메인 화면 구현시 특이사항

  • 띠배너 스크롤 일정 이하로 내려올시 hide, css로 구현해보자.
  • header는 일정 이하로 내려왔을때 top에 고정됨
  • hero banner 슬라이딩 효과 & 반투명 처리
  • 카카오버튼 , 스트롤 위아래 fixed
  • 베스트 영역 flex box 구현
  • 최소- 최대 width 구현 필요

레이아웃​

  • Flexbox Layout로 구현해보자

최종결과​