<![CDATA[ Jinny Kim - freeCodeCamp.org ]]> https://www.freecodecamp.org/korean/news/ https://cdn.freecodecamp.org/universal/favicons/favicon.png <![CDATA[ Jinny Kim - freeCodeCamp.org ]]> https://www.freecodecamp.org/korean/news/ Eleventy Sat, 23 May 2026 13:52:54 +0000 60 <![CDATA[ 기본 HTML5 템플릿: 모든 웹 개발 프로젝트를 할때, HTML 보일러플레이트로 시작하세요. ]]> 보일러 플레이트 코드 또는 그냥 보일러 플레이트는 거의 변하지 않는 여러 곳에서 관습적으로 반복되어 사용되는 ]]> https://www.freecodecamp.org/korean/news/basic-html5-template-boilerplate-code-example/ 645ef85b670e16066f8f2a29 Tue, 16 May 2023 06:48:57 +0000 기사 원문: 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>

Screen-Shot-2021-07-30-at-4.15.25-AM

CSS 스타일시트

이 코드는 사용자가 정의한 CSS를 HTML 페이지에 링크합니다 rel="stylesheet"는 HTML 파일과 외부 스타일 시트의 관계를 정의합니다.

    <link rel="stylesheet" href="style.css">

HTML의 스크립트 태그란 무엇인가요?

스크립트<script> 태그는 <body> 태그 바로 앞에 배치됩니다. 여기에 외부 자바스크립트 코드를 링크할 수 있습니다.

	<script src="index.js"></script>

결론

모든 HTML 페이지에 HTML 5 보일러 플레이트를 추가해야 합니다.
이 시작 코드에는 문서 유형(doctype), 메타데이터, 외부 스타일 시트 및 스크립트 태그와 같은 중요한 정보가 포함되어 있습니다.

]]>