티스토리 뷰

코드스테이츠 PMB 12기/Daily 과제

W7D1 | 테슬라 홈페이지를 통해 알아보는 프론트엔드 [코드스테이츠 PMB 12기]

서사소 2022. 6. 22. 14:41
프론트엔드 탐색하기
분석해보고 싶은 웹 기반 서비스를 하나 선택해, 해당 서비스의 랜딩 페이지 내용을 다음과 같이 나누어 분석해 봅니다.
화면의 구성 요소들을 이 어떻게 배치되어 있는지 구조를 정리해 분석해 봅니다.(HTML 요소)각 구성요소들이 어떠한 모양을 하고 있는지 스타일을 정리해 분석해 봅니다.(CSS 요소)
각 구성요소들이 가지고 있는 특정한 동작이 무엇인지를 정리해 분석해 봅니다.(JavaScript 요소) (단, 기능 중 '다른 페이지로 연결'은 제외합니다.)

춤추는 일론 머스크

오늘은 테슬라 웹 랜딩페이지의 html, css와 javascript에 대해 알아보겠다.

테슬라의 랜딩페이지

테슬라의 웹 랜딩페이지에는 주력 상품인 모델3의 모습이 보인다.

테슬라의 HTML

테슬라 홈페이지 HTML

HTML은 홈페이지를 만들때 뼈대 역활을 합니다. 

<!DOCTYPE html>
<html>
<head>
  문서를 정의하는 위치
</head>
<body>
  문서에 표시되는 컨텐츠
</body>
</html>

위 코드가 html의 기본 구조이자 틀입니다. 위에 보이는 테슬라의 페이지도 같은 html 구조를 가지고 있습니다.

<!DOCTYPE html>은 HTML5의 형식대로 작성했다는 것을 의미하여 선언하는것입니다.

 

<html> 태그는 시작과 끝을 의미합니다. 그 사이에는 <head> 태그와 <body> 태그로 구성됩니다.

<head> 태그는 페이지의 이름이나 문서의 타이틀 등을 지정합니다. 또한 html 문서 이외에 다른 곳에 있는 코드 혹은 파일을 불러올 때 쓸 수 있습니다. 대표적으로 <meta>, <title> 태그가 있습니다.

<body> 태그는 웹 브라우저를 통해 보이는 내용이 들어갑니다.

테슬라의 CSS

CSS는 구체적으로 어떤 스타일로 요소가 표시 되는지를 정하는 규격이라고 할 수 있습니다. 

먼저, 테슬라는 .css 파일로 분리하여 HTML 문서에 연결한 모습을 볼 수 있습니다. 'Model Y' 엘리먼트를 보게 되면 폰트는 14px 크기, "Gotham SSM" 폰트체와 색상은 #171A20을 사용한것을 확인할 수 있습니다. 또한 옆으로는 해당하는 HTML과 적용된 CSS에 대해 자세히 나와 있습니다. 

적용된 마진 또한 시각화된 이미지로 확인할 수 있다.

테슬라의 JAVASCRIPT

웹을 움직이는 근육이라 할 수 있는 JS(JavaScript)는 웹을 위한 인터프리터 언어이자 객체기반의 스크립트 프로그래밍 언어이며 HTML의 특정 요소(들)을 선택하여 다양한 이벤트 (마우스 클릭, 키보드 입력 등)에 따라 어떤 동작을 하도록 기능을 넣을 수 있으며 발생하는 이벤트에 따라 HTML, CSS를 조작할 수도 있고 그 외에도 여러가지를 할 수 있다.

JavaScript 
장점 단점
  • 컴파일과정이 필요없다 > 빠른 시간 안에 스크립트 코드를 작성할 수 있다.
  • OS에 직접 접근할 수 없다.
  • 다른언어들에 비해 단순한 구조와 원칙을 갖고 있어 배우기 쉽다.
  • 하드디스크를 읽거나 쓸 수 없다.
  • 웹에 특화된 기술이기 때문에 운영체제나 플랫폼에 상관없이 잘 작동되고 확장성이 높다.
  • 다른 프로그램을 호출할 수 없다.
 
  • 자바스크립트는 도메인이 동일한 두 탭/윈도우를 제외하고 탭/윈도우 간에 통신을 수행할 수 없다.
 
  • 자바스크립트는 웹 브라우저에서 실행되기 때문에 일부 보안상의 제약이 있으며, 브라우저에서 웹 페이지를 열 때 안전하고 위험에 처하지 않도록 보장해야 한다.
 
  • 일반적으로 자바스크립트는 자체 도메인에 대해서만 제한없이 네트워크 요청을 보낼 수 있다.

크롬을 이용해 웹 사이트의 JS 찾는법 링크

테슬라 웹페이지 상단 차종을 선택하는칸에 마우스로 포인트를 주면 동적으로 움직여 보이는 기능(mouseenter)이 있다. 그 기능의 JS를 크롬 개발자 도구의 'Event listener'를 통해 알아보았다.

mouseenter 코드를 조금 확장한 모습, 다 확장하기엔 너무나 많아서 그럴수없었다.

비개발자 입장에서는 간단하게 테슬라의 웹사이트를 살펴보았는데, 눈으로 봤을때는 단순한 기능인데 이렇게나 많은 코드들이 필요하다는것을 깨달았다.

저작자표시 (새창열림)

'코드스테이츠 PMB 12기 > Daily 과제' 카테고리의 다른 글

W7D3 | 오픈API에 대해 알아보자 [코드스테이츠 PMB 12기]  (0) 2022.06.27
W7D2 | 모바일 앱에도 종류가 있다? [코드스테이츠 PMB 12기]  (0) 2022.06.23
W6D3 | 스타링크의 비즈니스는 어디에 있고, 어디로 가고 있는가? [코드스테이츠 PMB 12기]  (0) 2022.06.17
W6D2 | Google Analytics로 트위터의 핵심 지표 분석하기 [코드스테이츠 PMB 12기]  (0) 2022.06.16
W6D1 | 트위터의 Flow Chart와 DB, 서버, 클라이언트, UI 작동 예상하기 [코드스테이츠 PMB 12기]  (0) 2022.06.15
댓글