by
Jan 25. 2023
GM 자동차 브랜드 '쉐보레' 랜딩페이지 뜯어보기
[코드스테이츠 PMB 16기] W7D1
＃ 아래의 내용은 코드스테이츠 PMB 16기 과정 중 일간 과제를 수행하기 위한 학습 과정입니다.
＃ 학습 목표 : 서버와 클라이언트 구조를 이해하고, 웹사이트의 구조를 이해하기
✔ 시작하며
KT그룹의 디지털미디어 연구조직인 나스미디어에서 발표한 '2022년 인터넷 이용자 조사'에 따르면, (모바일을 제외한) PC 인터넷 이용시간은 주 평균 154분에 달한다고 합니다. 그만큼 우리에게 인터넷이 없는 삶은 이제는 정말 상상하기도 싫을 정도입니다. 불과 몇개월 전 국민 메신저인 카카오톡이 화재로 인해 주말에 먹통이 되면서 이미 어느정도 체험을 하기도 했죠.
그만큼 우리의 삶에 인터넷은 필수불가결한 요소입니다. 인터넷을 이용하면서 우리는 다양한 '사이트'를 방문해서 뉴스를 보기도 하고, 정보를 얻기도 합니다. 그 과정에서 우리 디바이스(PC, 모바일 등)에 직접 표시되는 페이지 영역이 있는데요.
이 영역을 구현하기 위해서는 HTML, CSS, Javascript 등의 개발에 필요한 (일종의) 언어들이 필요합니다. 이를 웹을 구성하는 3요소라고 이야기합니다. 이 3요소를 활용해 디바이스에 화면이 출력되어 고객이 볼 수 있는 영역을 개발에서는 프론트엔드라 하고, 서버나 데이터베이스 같이 고객의 눈에는 보이지 않는 개발 뒷단의 영역을 백엔드라고 합니다. 우리가 이용하는 모든 서비스는 동전의 양면처럼 프론트엔드와 백엔드 영역으로 구성되어 있습니다.
오늘은 코드스테이츠 PMB 7주차 데일리 과제 첫번째 내용으로, 프론트엔드의 영역인 웹 사이트의 페이지를 보고 분석해보는 시간을 가져보려고 합니다. 그중에 제가 이용하는 차량 브랜드인 쉐보레(Chevolet)의 웹페이지를 알아보겠습니다.
✔ 쉐보레 웹페이지 구성요소
쉐보레 메인 페이지
쉐보레 홈페이지의 구조HTML : 웹 사이트의 구조를 만들기 위한 뼈대
홈페이지의 뼈대와 같은 역할을 담당하는 HTML은 크게 <head>와 <body>로 구성되며, head는 웹페이지에 직접 표시되지는 않더라도 현재 페이지를 설명하는 데이터들이 <head>와 </head> 사이에 들어있습니다. 보통 페이지의 이름이나 정보 등이 포함됩니다.
쉐보레 홈페이지 이름 head 내 작성 내용
홈페이지 정보를 담고 있는 메타 태그그리고 body는 웹페이지의 본문 영역으로, <body>와 </body> 사이에 적혀있는 내용들이 화면에 노출되는 내용들이 포함되어 있습니다. 다시 말해 실제 고객에게 보여지는 화면 부분에 대한 정보가 포함되어 있습니다.
* iframe : 이미 출력된 페이지(문서)안에 다른 html 페이지를 삽입하는 기능 
쉐보레 웹사이트 메인 페이지 <body> 영역CSS : 웹 사이트의 스타일(디자인) 요소를 적용하기 위한 요소
위에서 설명한 html로 홈페이지를 제작한다면, 모든 웹 사이트들은 아마 텍스트와 약간의 이미지로만 이루어진 사이트가 될 지 모릅니다. 하지만 웹 제작에 있어서 디자인적 요소도 중요한 부분이기 때문에, html과 함께 CSS라는 개발 요소를 활용하여 웹을 제작합니다.
쉐보레 홈페이지 내 CSS 요소 표시(항목마다 우측 값이 바뀐다.)
해당 웹페이지 대표 적용 요소 : flexboxJavascript : 웹 페이지를 좀 더 인터랙티브하게 만들기 위한 언어
html이 웹 페이지의 뼈대를, css가 디자인적 요소를 가미한다면 Javascript는 홈페이지 내에 만들어져 있는 구성요소들이 좀 더 다양한 형태로 동작할 수 있도록 만드는 개발 언어입니다. 이러한 도구를 활용하면, 웹사이트의 CSS와 HTML 구성요소들에 인터랙티브 계층을 추가할 수 있습니다. 주로 body 영역에 포함되어 있습니다.
예를 들어, 어떤 사이트에서 어떤 버튼을 누르면 옆에 자연스럽게 촤라락- 하고 하위 메뉴가 부드럽게 뜨는 경우를 볼 수 있습니다. 이는 Javascript를 활용한 기능으로 볼 수 있습니다.
Javascript가 적용된 영역을 살펴보면 class와 script라는 단어가 자주 눈에 띌텐데, 이 부분은 각각 Javascript 언어로 작성한 프로그램 단위(class)와 프로그램(script)로 구성되어 있습니다.
쉐보레 홈페이지 내 javascript가 적용된 영역, body 태그 내 존재하고 있다.
쉐보레 웹페이지 상단 '글로벌 네비게이션 바'
글로벌 네비게이션 바 내 javascript 활용, 하단 tabindex는 tab키 상호작용과 관련된 html 요소이다.#PM부트캠프 #코드스테이츠 #html #css #javascript #웹페이지 #프론트엔드 #백엔드 #서비스 #서비스기획 #기획 #pm #프로덕트매니저
keyword
