[코드스테이츠 PMB 14기] IT 교육 명가 코드스테이츠, 랜딩페이지 프론트엔드 분석

개발 교육 맛집 코드스테이츠의 랜딩페이지는 어떤 기술들이 적용되어 있을까?

IT 교육 명가의 페이지인 만큼 랜딩페이지에 있는 요소들이 액티브하고 상호 작용이 되는 요소들이 많아 분석하는 재미가 쏠쏠했다.

 

✅ head 살펴보기

html은 웹페이지의 뼈대를 만들며 크게 head와 body 두 영역으로  구성되어 있다.

head영역은 메타데이터의 집합이다. 사이트의 정보, 자바스크립트, css, 라이브러리 등 눈에 보이지는 않지만 페이지에 포함되어야할 항목들을 담아준다. 

 

크롬 개발자 도구를 열어 head 영역을 살펴봤다. 어지럽다.

한 줄 한 줄 살펴보니 데이터 분석을 위한 GA 연동을 위한 코드가 심어져있는 것을 확인하였다. 페이지의 정보를 설명하는 데이터가 담겨있는 것도 확인하였다.

 

✅ body 살펴보기 

body 영역에는 사용자에게 보여줘야할 내용들을 담는다.

해당 영역이 어떻게 뼈대가 잡혀있는지 태그를 색깔 별로 표시하였다. 전체 페이지를 분석하기에는 계속해서 반복되는 구조가 많아 이거 어떻게 움직이는거지? 라는 궁금증이 드는 페이지들의 자바스크립트, css를 분석했다.

 

1단계 : GNB메뉴, 배너

- html

- javascript 

랜딩페이지 접속 시 배너가 자동으로 특정 시간 마다 롤링된다. 이는 javascript의 j-query라이브러리를 이용하여 배너 순서들을 바꾸는 것으로 확인된다. (원리는 모른다..블로그가 그렇대요 ^[각주:1]) 

 

2단계 : 코스 소개

- html + css

2단계에서 각 수업 명 위에 마우스를 올렸을 때 색이 변한다. 요거 어떻게 하는 거지..하고 개발자도구를 유심히 살펴보니 마우스를 올려놨을 때 스타일 설정이 변경되도록 css의 기능임을 찾아냈다. ^[각주:2]

 

*margin과 padding의 차이  : margin은 테두리 바깥의 공간, padding은 테두리 안 쪽의 여백 크기를 설정한다

 

 

6단계 : 수료생이 취업한 기업들

-  css

수료생이 취업한 기업들을 보여주는 영역에서는 이미지가 계속해서 움직인다. 가로로 끊임없이 각 기업의 로고들이 돌아가고 있다.

 

해당 영역의 크기는 8482px, 지금 이용하는 디스플레이의 4배 정도 크기인데 어떻게 움직이고 있는 걸까? 구글링을 통해 css3.0 기능인 애니메이션이 적용되어 있는 것을 확인했다. ^[각주:3]

 

 

 

 

 

 

여기까지 코드스테이츠 랜딩페이지에 html, css, javascript가 어떻게 적용되었는지 살펴보았다.

역시 개발자의 최고 사수는 구글이라고하더니...궁금한 내용들을 구글에 검색하니 어떤 기술을 응용하는지에 대해 설명을 찾아낼 수 있었다 :) 

 

 

 

---

 

1. jQuery : 자동 롤링 배너 만들기 https://m.blog.naver.com/cosmosjs/221179156611 [본문으로]
2. 출처 : CSS :hover 효과? 마우스를 올린 태그를 선택! https://dasima.xyz/css-hover-%ED%9A%A8%EA%B3%BC-%EC%A0%95%EB%A6%AC/ [본문으로]
3. 출처 : [CSS] 움직이는 요소, 애니메이션 만들기: animation, @keyframes https://yzink.tistory.com/102 [본문으로]