10일차: HTML & CSS를 사용한 스타벅스 랜딩 페이지 클론

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

프론트엔드 개발자 및 HTML/CSS 학습자, 레이아웃 기술과 UI 설계 실습을 원하는 중급자

핵심 요약

• CSS 위치 지정 기법(absolute/relative)과 Flexbox 사용으로 레이아웃 구조 및 요소 정렬 구현
• 호버 효과(transition)와 CSS 그림자(box-shadow), 둥근 모서리(border-radius)로 현대적 UI 디자인 적용
• 카드 UI 및 네비게이션 바(sticky, responsive) 구조 설계를 통한 반응형 웹 실습

섹션별 세부 요약

1. 네비게이션 바 설계

• Flexbox(display: flex)로 메뉴 항목의 가로 정렬 및 스티키 고정(position: sticky) 적용
• 호버 효과로 링크에 인터랙션 추가
• 로고, 검색창, 프로필 아이콘 포함

2. 위치 지정 기술(절대/상대)

• 구독 섹션에서 절대/상대 위치 지정으로 배경/전경 이미지 분층
• z-index로 요소 겹침 관리 및 텍스트/버튼 정밀 위치 지정
• 레이아웃 무결성 유지를 위한 공간 배치 전략

3. Flexbox 및 간격 설정

• .co-image 섹션에서 6개 아이템(베스트셀러, 음료 등)을 Flexbox로 정렬
• justify-content: space-evenly로 균일 간격 배치
• CSS transition으로 이미지에 호버 스케일 효과 적용

4. 카드 UI 설계(바리스타 추천 섹션)

• 상품 이미지, 이름, 가격, "추가하기" 버튼 포함
• 중첩 Flexbox로 이미지/텍스트 정렬
• 스타벅스 브랜딩과 일치하는 버튼 스타일(둥근 모서리, 그림자, 배경색) 적용

결론

• CSS 위치 지정(absolute/relative)과 Flexbox의 실무 활용 중요성 인식
• 호버 효과(transition) 및 디자인 세부 요소(그림자, 간격)가 사용자 경험(UX) 향상에 기여
• GitLab에 프로젝트 파일 연결하여 완전한 코드 확인 필요
• 반응형 웹 개발을 위한 네비게이션 바 조정과 레이아웃 유연성 확보 전략 실습