'샤넬 공식 웹사이트' 프론트엔드 탐색하기[W7D1_코드스테이츠 PMB 12기]

이번주에는 개발적인 부분에 대해서 배우기 시작했습니다.

기본적인 지식은 있지만 살제 프로덕트에서 정확히 어떤 부분이 어떤 요소로 개발이 되었는지 알쏭달쏭한 경우도 있어서 오늘은 개발적인 요소를 중심으로 프로덕트의 이모저모를 뜯어볼 에정입니다.

 

오늘 살펴볼 랜딩페이지는 '샤넬 공식 홈페이지'입니다.

이와 같은 패션 브랜드 사이트가 일반적인 웹 페이지들보다 여러 가지로 현란한 이미지들이 많이 사용하지만 또 구성이 생각보다 단순해서 오늘 과제로 살펴보면 좋을 것 같아 가져와봤습니다.

 

 

HTML 요소

이렇게 랜딩페이지의 각 구성, 위치 등의 구조를 잡는 부분이 HTML이라고 볼 수 있습니다.

 

 

HTML로 이루어진 부분만 별도로 분리해서 보면 다음과 같은 모습이 되겠죠!

 

 

HTML을 잘 알지는 못하지만 얄팍한 지식을 바탕으로 (제가 구분해낼 수 있는)html과 관련된 코드만 뜯어보자면 다음의 요소가 될 것 같습니다.

위 코드는 아래와 같이 샤넬 브랜드 사이트를 열었을 때, 탭에 표시되는 텍스트들을 표시하기 위해서 작성한 코드로 보여집니다.

 

 

CSS 요소

CSS는 어디에 이미지를 삽입할 것이고, 어느 정도 사이즈로 보여줄 것인지, 제시된 텍스트의 컬러, 모양, 사이즈는 어떻게 할 것인지 등 디자인적인 부분을 다룹니다. 

맞는 부분인지는 확신이 서지 않지만 이와 같이 폰트, 컬러, 굵기 등을 다루는 부분이라고 볼 수 있을 듯 싶습니다.

 

 

JavaScript 요소

자바스크립트는 HTML과 CSS로 이루어진 프로덕트의 동적인 부분을 채워줍니다. 즉, 프로덕트 내의 다양한 동작을 가능하게 만들죠.

 

예를들어, 웹페이지 상단 마이페이지 아이콘어 커서를 대면 '마이페이지'라고 텍스트가 나오네요. 이와 같이 사용자의 동작에 따라 프로덕트에서도 반응을 하도록 만들어줍니다. 

코드는... 제가 자바스크립트는 잘 볼 줄 몰라서 생략하도록 하겠습니다..ㅎㅎ 더 공부해올게요.

 

 

그럼 이만 안녕!