강의 목표

• Tailwind CSS에서 제공하는 fixed 및 sticky 위치 속성을 학습합니다.
• fixed와 sticky 속성을 이용해 시멘틱한 태그를 사용하여 고정된 헤더와 스크롤 시 우측에 따라다니는 상품 정보와 결제 버튼이 포함된 UI를 구성합니다.

Position - fixed

fixed는 요소를 뷰포트에 고정하여, 스크롤 시에도 해당 요소가 고정된 위치에 머무르도록 합니다.

실습: Fixed 헤더

• 쇼핑몰이나 일반 웹사이트에서 상단에 고정된 시멘틱한 header 요소를 사용한 실습을 진행합니다.
• 마크업:
• 실습코드:

Position - sticky

sticky는 스크롤할 때 요소가 지정된 위치에 도달하면 고정되며, 그 이후에는 부모 요소의 끝에 도달할 때까지 고정된 상태를 유지합니다.

실습: Sticky 상품 카드 UI

• 쇼핑몰에서 우측에 따라다니는 상품 정보와 결제 버튼이 포함된 카드 UI를 구성합니다.
• 마크업:
• 실습코드:

참고 문서