HTML • CSS • JAVASCRIPT
[코드스테이츠 PMB 9기] 에어비앤비 웹페이지 '개발자 도구' 참고
HTML
HTML의 구조는 <head>와 <body>로 이루어져 있습니다.
<html>
<head></head>
<body></body>
</html>
1. <head>
페이지에 대한 메타데이터를 담고 있으며, 우리가 보는 페이지에는 표시되지 않는 정보입니다. 메타데이터에는 title, script, style, meta 등이 포함됩니다. 아래는 에어비앤비 웹페이지에서 개발자 도구를 통해 본 <head> 부분입니다. 전체 중 일부를 발췌하였습니다.
title : 문서 제목
charset : HTML 문서의 문자 인코딩 방식
style : 내부 head 태그 사이에서 style 태그로 CSS 연동
meta : 데이터에 대한 데이터
link : 외부 요소 가져오기
script : 자바스크립트
base : 기본 페이지 설정
에어비앤비 <header>airbnb
➜ charset을 통해 문서의 character 인코딩에 대한 표시입니다. utf-8 은 많은 언어와 문자를 포함하는 전세계적인 character 집합으로 어떤 문자든 다룰 수 있음을 의미합니다.
➜ name은 어떤 정보의 형태인지를 알려주고, content는 실제 메타데이터의 콘텐츠를 의미합니다.
2. <body>
HTML 문서의 텍스트, 하이퍼링크, 이미지, 리스트 등의 모든 콘텐츠가 포함된 몸통을 나타내는 태그입니다. 우리 눈에 보이는 것들이 body에 있는 요소라고 할 수 있습니다.
header : 제목, 부제목, 로고 같은 정보 제공
div : 레이아웃을 나누는데 사용. CSS와 연동하여 쓰임
왼쪽 : 에어비앤비 웹페이지 | 오른쪽 : body 레이아웃 코드airbnb
➜ 위 그림의 오른쪽 코드에서 토글(toggle) 안에는 보다 자세한 코드들이 있습니다. 각 <div>는 왼쪽의 색깔 별로 나눈 레이아웃을 표현하고 있습니다.
CSS
HTML문서에 디자인 요소를 더하는 언어입니다. CSS를 적용하는 방법은 크게 세가지로 나뉩니다.
에어비앤비의 내부 스타일 시트 적용 모습1. 인라인 스타일(Inline Style) : html 요소 내부에 style 속성을 사용하여 CSS 적용. 해당 요소에만 스타일 적용됨
2. 내부 스타일 시트(Internal Style Sheet) : <head> 태그에서 <style> 태그를 사용. 해당 HTML 문서에만 스타일 적용할 수 있음
3. 외부 스타일 시트(External Style Sheet) : 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 해줌. <head> 태그에서 <link>태그를 사용
airbnb
에어비앤비에는 세 가지 방법이 모두 사용되고 있습니다. 이렇게 혼합되어 사용될 경우, 스타일이 적용되는 순서는 다음과 같이 정해집니다. 인라인 스타일과 내부・외부 스타일 시트가 적용된 경우, 인라인 스타일이 우선적으로 적용되고, 내부・외부 스타일 시트는 적용되지 않습니다.
인라인 스타일 > 내부・외부 스타일 시트 > 웹 브라우저 기본 스타일
JAVASCRIPT
<script>...</script>
자바스크립트는 웹의 동작을 구현하는 언어입니다. 자바스크립트의 특징은 다음과 같습니다.
• 객체 기반의 스크립트 언어
• 동적이며, 타입을 명시할 필요가 없는 interpreter 언어
• 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현 가능
(**객체란 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입. 예를 들어, 숫자, 문자열, Boolean 등)
defer & async
자바스크립트가 HTML 문서의 어디에 위치하는가가 웹페이지 로딩(loading) 속도에 영향을 줄 수 있습니다. 데이터는 위에서부터 순서대로 로딩되는데 이를 파싱(parsing)이라고 합니다. 따라서 웹브라우저는 HTML문서를 순차적으로 파싱하기 때문에 자바스크립트가 삽입된 위치에 따라 로딩시간이 길어질 수 있습니다. 특히, 자바스크립트 용량이 클 경우 시간은 더욱 길어지게 되겠죠. 그래서 자바스크립트를 <head>보다 <body>의 맨 끝에 위치시키기도 합니다.
이러한 문제의식에서 파일 다운로드와 자바스크립트 코드 실행을 최적화하기 위한 방법이 고안되었습니다. <script>의 defer 속성과 async 속성입니다. HTML 문서를 파싱을 하던 중 defer나 async를 마주치게 되면 자바스크립트 파일 다운로드를 명령하고, 나머지 HTML 문서를 파싱합니다. 이렇게 비동기화 방식을 사용함으로써 로딩의 속도가 느려지는 것을 문제를 완화할 수 있습니다.
defer와 async의 차이점은 async의 경우, <script> 파일을 다운로드 받게 되면 <script> 순서에 상관없이 다운로드 완료된 파일부터 실행합니다. 따라서 <script> 파일 순서가 중요할 경우 문제가 발생할 수 있습니다. 반면, defer의 경우, <script> 파일을 다운로드가 완료된 후에 실행되기 때문에 안전한 장점이 있습니다.
