스타벅스 렌딩페이지 분석
화면의 요소들은 어떻게 배치되어 있을까?(HTML)
헤드 영역
왼편에 스타벅스 아이콘이 있고 서브 메뉴와 메인 메뉴가 배치되어 있습니다.
바디 영역
바디 영역은 여러 섹션 영역으로 나눌수 있습니다.
여러 섹션에는 다양한 사진과 버튼 그리고 텍스트가 들어가 있습니다.
풋터 영역
풋터 영역에는 스타벅스 회사에 관한 정보가 리스트 형태로 들어가 있습니다.
각 구성요소들이 어떠한 모양을 하고 있을까?(CSS)
헤드 영역
헤드영역의 배경 색깔은 아이보리 색깔에 가까운 하얀색이며 서브메뉴의 메뉴의 글자 색깔이랑 메인 메뉴의 글자 색깔이 다릅니다. 메인 메뉴의 색깔이 더욱 진한 검은색입니다.
바디 영역
바디 영역에서는 섹션별로 다양한 배경 색깔과 버튼 색깔 폰트 색깔 등을 통해서 꾸미고 있습니다.
풋터 영역
풋터 영역의 배경색은 검은색이고
폰트는 하얀색 포트입니다.
각 구성요소들이 가지고 있는 특정한 동작이 무엇인가요?(Javascript)
헤드 영역
서브 메뉴에 있는 검색 아이콘을 클릭할 시 검색창이 생깁니다.
메뉴에 마우스를 갖다 대면 검은 배경과 함께 상세 메뉴들이 밑으로 나열됩니다.
바디 영역
바디 영역에서는 이미지가 순차적으로 띄어지는 요소가 있습니다. 그리고
마우스 스크롤을 내리면 이미지와 글이 가운데로 정렬되는 요소도 있습니다.
풋터 영역
풋터 영역에서는 따로 javascript가 적용되어 동작하는 부분이 없는 거 같습니다.
'프로덕트 매니지먼트' 카테고리의 다른 글
| [코드스테이츠 PMB 9기]카카오헤어샵 예약하기 플로우차트 (0) | 2022.01.06 |
|---|---|
| [코드스테이츠 PMB 9기] 카카오헤어샵 예약하기 플로우차트 (0) | 2022.01.06 |
| [코드스테이츠 PMB 9기] 틴더 데이터 시각화 (0) | 2021.12.30 |
| [코드스테이츠 PMB 9기] 카카오헤어샵 린분석 (0) | 2021.12.29 |
| [코드스테이츠 PMB 9기] 카카오헤어샵 GA로 핵심지표 확인하기 (0) | 2021.12.28 |