코드스테이츠 PM 부트캠프/Daily

[코드스테이츠 PMB 9기] W7D1 마켓컬리 랜딩 페이지 뜯어보기

김마론 2022. 1. 3. 23:29

내일의 장보기
마켓컬리

프런트엔드 탐색하기

 

[코드스테이츠 PMB 9기] (미완성) W5D3/W5D4 마켓컬리와 랜딩 페이지

내일의 장보기 마켓컬리 1. 앱 서비스(혹은 웹 서비스) 1가지를 선택하여 랜딩 페이지를 분석해주세요. 2. 현재 랜딩 페이지에서 개선해야 할 부분과 그 이유에 대하여 이야기해주세요. (최소 2가

kimmarronn.tistory.com

 

마켓컬리 웹 서비스

분석해보고 싶은 웹 기반 서비스를 하나 선택해, 해당 서비스의 랜딩 페이지 내용을 다음과 같이 나누어 분석해 봅니다.

 

다시 마켓컬리다. 마켓컬리는 앱 기반 서비스이지만 웹 서비스도 운영하고 있다. 그래서 지난 과제에서 마켓컬리의 랜딩 페이지를 분석한 바 있다. 그래서 지난 과제에 이어 마켓컬리의 랜딩 페이지를 분석해보려고 한다.

 


마켓컬리의 HTML

화면의 구성 요소들을 이 어떻게 배치되어 있는지 구조를 정리해 분석해 봅니다.

 

head와 body로 구성되어 있음

(사실 아직 어떻게 배치되어 있는지는 감이 오질 않는다..)


마켓컬리의 CSS

각 구성요소들이 어떠한 모양을 하고 있는지 스타일을 정리해 분석해 봅니다.

body 

글꼴 noto sans, Apple 고딕, 맑은 고딕을 사용

글자 크기 12픽셀

height 100%

margin 0 padding 0

 

더보기

head

head는 이렇게 다 줄이 쳐진 상태로 나오는데...css도 모르겠고 뭘 의미하는 지 모르겠다 ㅠㅠ


마켓컬리의 JavaScript

각 구성요소들이 가지고 있는 특정한 동작이 무엇인지를 정리해 분석해 봅니다.
단, 기능 중 '다른 페이지로 연결'은 제외합니다.

내가 이전 게시글에서 다룬 맨 위로가기 버튼이 표시된 걸 알 수 있다..

pagetop이라는 기능을 이용하여 ... bottom : 15px의...버튼을 만든 것을 확인할 수 있었다...

 

 


참고자료

 

[코드스테이츠 PMB 9기] (미완성) W5D3/W5D4 마켓컬리와 랜딩 페이지

내일의 장보기 마켓컬리 1. 앱 서비스(혹은 웹 서비스) 1가지를 선택하여 랜딩 페이지를 분석해주세요. 2. 현재 랜딩 페이지에서 개선해야 할 부분과 그 이유에 대하여 이야기해주세요. (최소 2가

kimmarronn.tistory.com