[HTML] 자동완성 기본 템플릿

rigood 2023. 6. 3. 09:49

VS Code에서 !을 누르고 엔터를 치면 나오는 HTML 기본 템플릿에 대해서 알아보았다.

<!DOCTYPE html>

DOCTYPE 선언문은 웹브라우저에게 HTML 버전을 알려주는 역할을 한다. 버전마다 선언 방식이 다르며, HTML5에서는 위와 같이 간단히 선언할 수 있다.
HTML 태그는 아니나, <html> 태그 전에 가장 먼저 선언해줘야 한다.

<html lang="en"></html>

html 태그는 HTML 문서의 루트 요소를 정의할 때 사용되며, DOCTYPE 선언을 제외한 모든 HTML 요소를 포함하기 위한 컨테이너이다.
lang 속성은 웹문서 전체 또는 일부에 언어를 지정해주는 속성으로, 언어 설정에 따라 스크린리더, 검색엔진 및 브라우저 지원이 달라진다. ISO 언어코드(ex: ko) 또는 언어코드-국가코드(ex: en-US)를 사용한다.

<meta charset="UTF-8" />

ASCII: 영문 대소문자+특수문자 128개를 1byte로 표현, 한글 표현불가
EUC-KR: 한글을 2byte로 표현, 완성형코드(글자와 코드 1:1 매칭)이므로 코드표에 없는 한글 표현불가
유니코드: 전세계 모든 문자를 표현하며 한글은 3byte로 표현, 문자에 따라 표현하는 byte가 달라지므로 다양한 인코딩 방식이 존재, 가장 대표적인 것이 UTF-8 방식으로 아스키코드는 1byte로 표현하고, 첫번째 byte의 시작 bit에 따라 몇 byte로 인코딩할지를 결정

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

meta 태그의 X-UA-Compatible 속성값은 인터넷 익스플로러가 웹페이지를 표시할 때 content에 명시된 속성값에 따라 렌더링 하도록 할 때 사용된다.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

viewport란 웹페이지가 사용자에게 보여지는 영역을 의미한다. meta 태그의 viewport 속성값은 모바일에서 viewport 크기를 조절하기 위해 사용된다. PC에서는 브라우저 창의 크기를 변경하여 viewport를 바꿀 수 있지만, 모바일에서는 브라우저 창의 크기가 고정되므로 viewport의 너비와 배율을 조절해야 한다. 위 태그는 viewport 너비는 기기 너비로, 초기 배율은 1로 설정한다는 의미이다.

<link rel="stylesheet" href="" />
<link rel="shortcut icon" href="" type="image/x-icon" />

link 태그란 현재 문서와 외부 리소스의 관계를 명시하며, 스타일시트를 연결할 때 제일 많이 사용되지만, 아이콘 연결 등 다양한 용도로도 쓰인다.