Research/HTML
HTML5 boilerplate에 대해
RIEM
2022. 10. 12. 10:04
Boilerplate 양식
<!DOCTYPE html>
doctype 정의
doctype은 브라우저에게 이 페이지가 어떤 버전의 HTML으로 작성되었는지 알려준다. 이를 생략하면 브라우저가 HTML5 태그들(<article>, <footer>, <header>)을 인식하지 못할 수도 있다.
<html lang=”en”>
이 페이지가 어떤 언어로 쓰였는지 알려준다. 스크린 리더들이 텍스트를 읽는데 도움을 준다(accessibility).
<head>
<head> 태그에는 기계처리를 위한 정보를 담는다.
<meta charset=”utf-8”>
UTF-8은 standard character encoding이다. UTF-8는 유니코드 기반의 인코딩이고 아주 넓게 쓰인다.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0’>
viewport는 화면을 설정한다. 이 코드는 페이지 화면의 width를 기기의 width로 맞춰준다. 예를 들어 스마트폰의 width가 600px이면 페이지 화면도 600px가 된다.
initial-scale은 확대 비율을 조절하는데, 1.0은 디폴트 옵션이다
| 흐름 순으로 파악하면 1)이 문서가 어떤 html 버전인지 정의해주고, 2)언어를 정의한 다음 3)기계가 처리하는 정보를 담은 <meta>와 유저가 볼 수 있는 정보를 담은 <body>가 온다. meta 태그에서 charset은 언어 인코딩 방식을 규정하는데 보통 유니코드 기반의 utf-8를 쓴다. 그 외 viewport를 설정하여 기기의 너비와 페이지 너비를 동기화시킨다. |