Team4) [HTML, CSS, JavaScript] 애플 페이지 분석

[선정페이지]

1. 선정 사이트: 애플

2. 선정 페이지

 -애플 메인페이지: https://www.apple.com/

​ -아이폰 13 Pro 상세페이지: https://www.apple.com/kr/iphone-13-pro/

3. 선정이유

 -웹디자인의 정석이라 불리는 애플의 페이지 구조를 분석하며 이후 프로젝트에 반영하고자 한다.

 

[일정]

준비일정: 22.2.7 - 22.22.20

발표: 22.2.21

 

[공통페이지]

1. 전체구조

애플에서는 크게 nav, main, footer 3가지 구조로 나눌 수 있다.

 

 

main부분에서 각각의 sectino의 class명은 각각 소개것이 무엇인지 알수 있게 직관적으로 지어져 있다.

 

 

2. globalnav

-메뉴를 보여주는 glabalnav는 모든 페이지 상단에 공통적으로 배치한다.

-메인페이지에서는 상단에 고정되지만, 다른 페이지에서는 고정되지 않는다.

-반응형이 적용되어 너비에 따라 다르게 변화되는 모습을 볼 수 있다.

 

 

3. localnav

 

 

 

nav구조

 

nav리스트

 

4. footer

애플의 footer는 공통적으로 똑같이 보여주는 부분이 있고, 페이지 마다 다르게 보여주는 부분이 있다.

 

 

 

 

 

[메인 페이지]

 

 

 

 

[제품 상세 페이지]

1.공통속성

카메라를 보여주는 섹션과 디스플레이를 보여주는 섹션 등에는 innovation이라는 class명을 가진 div가 존재한다.

여기의 버튼을 누르면 숨겨져있던 부분이 펼쳐지는데 내가 본 다른 페이지에서는 display: none; 속성을 썼지만

애플에서는 aria-hidden="true"속성을 쓰는 것을 볼 수 있다.

 

 

2. 화면분할

-flex: 가로축 혹은 세로축 기준의 1차원 배열식으로 나열

-grid: 가로, 세로축을 가지는 2차원 배열식으로 나열

애플에서는 grid 특성과 flex 속성을 적절히 잘 사용하여 화면을 구성하는 모습을 볼 수 있다.

 

*flex 화면분할

flex를 통하여 좌우 또는 상하로 나누는 1차원 배열 형식을 볼 수 있다.

 

 

*grid 화면분할

마우스 스크롤에 따라 여러 아이폰의 위치를 가로 세로로 각각 지정해 준다.

2차원 배열형식이 필요하므로 grid를 사용한다.

 

 

*flex grid 화면분할

6개의 그림을 감싸는 div와 각각의 그림을 감싸는 div는 grid로 틀을 잡아주었고,

각각의 그림 내의 텍스트는 flex를 통해 위치를 잡아주었다.

 

 

2. 기능

애플은 마우스의 스크롤에 따른 이벤트를 적극적으로 활용하는 모습을 보인다.

 

 

 

[느낀점]

웹디자인의 정석이라 불리는 애플을 분석하면서 효과같은 건 많을 수 있지만 오히려 다른 페이지 보다 구조자체가 깔끔하다고 느꼈다. 그럼에도 자신들이 하고 싶은 메시지를 명확하게 전달하는 걸로 보아 프론트는 복잡하게 짜는것이 능사가 아니라고 느꼈다.