Original article: Basic HTML5 Template: Use This HTML Boilerplate as a Starter for Any Web Dev Project
새 웹페이지를 만들 때, 좋은 기반을 갖고 시작하는 것은 매우 중요합니다.
이 아티클에서는 HTML5 보일러 플레이트가 무엇인지 또 어떻게 기본 템플릿을 프로젝트에 사용하는 것에 대하여 설명합니다.
HTML5 보일러 플레이트란 무엇인가요?
Wikipedia 에 따르면,
보일러 플레이트 코드 또는 그냥 보일러 플레이트는 거의 변하지 않는 여러 곳에서 관습적으로 반복되어 사용되는 코드의 부분을 말합니다.
HTML 템플릿의 보일러 플레이트는 프로젝트를 시작할 때 추가할 템플릿입니다.
모든 HTML 페이지에 보일러 플레이트를 넣어야 합니다.
HTML5 보일러 플레이트의 예시
기본 예제를 봅시다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="index.js"></script>
</body>
</html>
HTML 안의 doctype는 무엇인가요?
HTML코드의 첫 번째 줄은 doctype 선언이어야 합니다.
doctype은 브라우저에 HTML이 어떤 버전인지 알려줍니다.
<!DOCTYPE html>
만약 당신의 파일에 이 코드 라인을 넣는 것을 잊어버리면, <article> , <footer>, and <header> 같은 HTML5 태그 중 일부는 브라우저에서 지원을 하지 못합니다.
HTML 기본(root) 요소는 무엇인가요?
<html> 태그는 HTML파일의 최상위 요소입니다. <html> 안에 <head>태그와 <body>가 포함되어 있습니다.
<!DOCTYPE html>
<html lang="en">
<head></head>
<body></body>
</html>
<html> 태그 안에 있는 lang 속성은 페이지의 언어를 설정합니다.
화면 리더기가 올바르게 발음하는 방법을 알 수 있고 접근성을 위해서도 lang 속성을 포함하는 것이 좋습니다.
HTML의 head 태그란 무엇인가요?
<head> 태그에는 기계가 처리할 수 있는 정보가 포함되어 있습니다.
<head> 태그 안에는 기계가 문서를 설명할 수 있는 메타데이터가 포함되어 있습니다.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
</head>
UTF-8 문자 인코딩이란 무엇인가요?
UTF-8은 웹페이지에서 사용하는 표준 문자 인코딩을 말합니다.
보통 이 <meta>태그는 <head>요소의 첫 번째에 있습니다.
<meta charset="UTF-8">
월드 와이드 웹 컨소시엄(World Wide Web Consortium(W3C)에 따르면,
UTF-8과 같은 유니코드 기반 인코딩은 다양한 언어를 지원할 수 있으며 언어가 혼합된 페이지와 서식을 처리할 수 있습니다.
또한 각 페이지 또는 수신되는 서식 제출에 대한 문자 인코딩을 개별적으로 결정하기 위해 서버 로직(server-side logic)을 사용할 필요가 없습니다.
HTML의 뷰포트 메타 태그란 무엇인가요?
이 태그는 페이지의 너비를 기기의 화면 크기의 너비에 맞게 렌더링합니다.
너비가 600픽셀인 모바일 기기를 사용하는 경우 브라우저 창도 너비가 600픽셀이 됩니다.
초기 배율은 확대/축소의 크기 배율을 조절합니다. 초기 배율을 1로 설정하면 브라우저의 기본 확대/축소를 방지할 수 있습니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
X-UA-호환(X-UA-Compatible)은 무엇인가요?
이 <meta>태그는 인터넷 익스플로러의 문서모드를 지정합니다.
IE=edge 가 가장 많이 지원되는 모드입니다.
<meta http-equiv="X-UA-Compatible" content="ie=edge">
HTML의 타이틀(<title>) 태그란 무엇인가요?
<title>태그는 웹페이지의 타이틀을 말합니다. 이 태그의 값은 브라우저의 타이틀 바의 글귀를 바꿔줍니다.
<title>HTML 5 Boilerplate</title>
CSS 스타일시트
이 코드는 사용자가 정의한 CSS를 HTML 페이지에 링크합니다 rel="stylesheet"는 HTML 파일과 외부 스타일 시트의 관계를 정의합니다.
<link rel="stylesheet" href="style.css">
HTML의 스크립트 태그란 무엇인가요?
스크립트<script> 태그는 <body> 태그 바로 앞에 배치됩니다. 여기에 외부 자바스크립트 코드를 링크할 수 있습니다.
<script src="index.js"></script>
결론
모든 HTML 페이지에 HTML 5 보일러 플레이트를 추가해야 합니다.
이 시작 코드에는 문서 유형(doctype), 메타데이터, 외부 스타일 시트 및 스크립트 태그와 같은 중요한 정보가 포함되어 있습니다.