Frontend Academy · 강의

문서 구조: DOCTYPE html head body

DOCTYPE 선언, html 루트, 메타데이터를 위한 head, 콘텐츠를 위한 body로 유효한 HTML5 문서를 처음부터 작성합니다.

문서 구조: DOCTYPE html head body은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

모든 HTML 문서는 같은 뼈대를 가집니다

유효한 HTML5 문서는 항상 DOCTYPE 선언으로 시작하고, html 루트 요소를 포함하며, 그 안에 메타데이터를 위한 head 영역과 화면에 표시되는 콘텐츠를 위한 body 영역을 포함합니다. 이 구조를 이해하는 것이 0단계입니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

DOCTYPE 선언

<!DOCTYPE html>은 HTML 태그가 아니라 브라우저에 페이지를 표준 모드로 렌더링하라고 지시하는 명령입니다. 이것이 없으면 브라우저는 ‘쿼크 모드’로 전환되어 페이지를 일관되지 않게 렌더링합니다. 항상 첫 번째 줄에 넣으세요.

<html> 요소와 lang 속성

<html> 요소는 문서의 루트입니다. 페이지의 언어를 선언하려면 lang 속성을 추가하세요. 화면 낭독기는 이를 사용하여 올바른 발음 엔진을 선택하고, 검색 엔진은 이를 사용하여 현지화된 결과를 제공합니다.

<html lang="en">
<!-- or -->
<html lang="fr">
<html lang="de">

<head> 요소

<head>에는 메타데이터, 즉 페이지 콘텐츠 자체가 아니라 페이지에 관한 정보가 들어 있습니다. head 내부의 어떤 내용도 사용자에게 직접 표시되지 않지만 브라우저와 검색 엔진이 페이지를 처리하는 방식에 영향을 줍니다.

charset 및 viewport 메타 태그

<meta charset="UTF-8">은 브라우저에 파일을 UTF-8로 디코딩하라고 알려 주며, 모든 국제 문자를 지원합니다. <meta name="viewport">은 모바일에서 반응형 디자인이 작동하도록 합니다.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title> 요소

<title> 텍스트는 브라우저 탭, 북마크, 검색 엔진 결과에 표시됩니다. 간결하고(50~60자), 설명이 분명하며, 끝에 브랜드 이름이 오도록 작성하세요.

<title>Getting Started with HTML | CoddyKit</title>

CSS와 글꼴 연결하기

head 내부에 <link>를 사용하여 외부 스타일시트를 연결하세요. rel="stylesheet"과 올바른 href를 사용하세요. Google의 글꼴 서비스와 다른 글꼴 서비스도 같은 방식으로 연결합니다.

<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">

<body> 요소

페이지에서 볼 수 있는 모든 것은 <body> 안에 들어갑니다. 제목, 단락, 이미지, 버튼, 양식, 스크립트가 여기에 포함됩니다. body는 사용자가 보고 상호작용하는 부분입니다.

스크립트 태그: 배치 위치

<script src="app.js" defer></script>를 <head> 안에 배치하세요. defer 속성은 스크립트를 병렬로 다운로드한 다음 HTML을 완전히 구문 분석한 후 실행하므로, 가장 안전한 기본 선택입니다.

<head>
  <script src="app.js" defer></script>
</head>

HTML 주석

를 사용하여 HTML에 메모를 추가하세요. 주석은 사용자에게 표시되지 않지만 소스 보기에서는 볼 수 있습니다. 주석으로 작성 의도를 설명하거나, 영역을 표시하거나, 디버깅 중 코드를 일시적으로 비활성화할 수 있습니다.

<!-- Navigation section -->
<nav>
  ...
</nav>
<!-- End navigation -->

유효성 검사: W3C 유효성 검사기

HTML을 validator.w3.org에 붙여 넣어 오류를 확인하세요. 유효한 HTML은 브라우저 간 불일치를 줄이고, 화면 낭독기가 페이지를 올바르게 해석하도록 도우며, 전문적인 완성도를 보여 주는 기준이 됩니다.

빠른 확인

<meta charset="UTF-8"> 태그는 어디에 배치해야 하나요?

복습: HTML 문서 뼈대

모든 HTML 파일에는 다음이 필요합니다: → → (문자 집합, 뷰포트, 제목, CSS 링크) → (표시되는 모든 콘텐츠). 이 뼈대는 브라우저 간 일관성, 접근성, 적절한 검색 엔진 최적화 색인 생성을 보장합니다.

자주 묻는 질문

“문서 구조: DOCTYPE html head body” 강의는 무료인가요?

네 — “문서 구조: DOCTYPE html head body” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“문서 구조: DOCTYPE html head body”에서 뭘 배우나요?

DOCTYPE 선언, html 루트, 메타데이터를 위한 head, 콘텐츠를 위한 body로 유효한 HTML5 문서를 처음부터 작성합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Frontend Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“문서 구조: DOCTYPE html head body” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Frontend Academy(으)로 돌아가기