📄
EPISODE 01
DOCTYPE · head/body · 기본 태그
HTML 기초
HTML 문서의 뼈대를 이루는 기본 구조와 자주 쓰이는 태그(h1-h6, p, div, span, ul/ol)를 익힙니다.
HTMLDOCTYPE기본구조
소요 시간
⏱ 30~60분
난이도
📊 초보
선수 조건
🎯 없음
결과물
기본 구조를 갖춘 자기소개 HTML 페이지
이 강의에서 배우는 것
- 1HTML이 마크업 언어인 이유를 설명한다
- 2DOCTYPE과 기본 골격(html/head/body)을 작성한다
- 3h1~h6 / p / div / span을 적절히 구분한다
- 4ul/ol/li로 순서·비순서 목록을 만든다
1. HTML이란
HTML(HyperText Markup Language)은 웹 페이지의 구조와 내용을 기술하는 마크업 언어입니다. 태그(tag)로 문서의 구조를 표현합니다.
html
<태그이름>내용</태그이름>- 여는 태그(<태그>)와 닫는 태그(</태그>)가 쌍을 이룸
- 일부 태그는 닫는 태그 없이 단독 사용 (<br>, <img>, <input>)
2. DOCTYPE 선언
html
<!DOCTYPE html>HTML 문서의 첫 번째 줄에 반드시 작성합니다. 브라우저에 “이 문서는 HTML5 형식”이라고 알려주는 선언입니다.
3. 기본 문서 구조
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>페이지 제목</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>첫 번째 HTML 문서입니다.</p>
</body>
</html>| 태그 | 역할 |
|---|---|
| <html lang="ko"> | 최상위 태그, 언어 지정 |
| <head> | 브라우저에 보이지 않는 문서 정보 |
| <body> | 화면에 실제로 표시되는 내용 |
4. 메타태그
html
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="페이지 설명">
<meta name="keywords" content="HTML, 웹, 기초">
<meta name="author" content="홍길동">
<title>나의 첫 HTML 페이지</title>5. 제목 태그 h1~h6
html
<h1>1단계 — 페이지당 1개 권장</h1>
<h2>2단계 — 주요 섹션</h2>
<h3>3단계 — 소제목</h3>
<h4>4단계</h4>
<h5>5단계</h5>
<h6>6단계 — 가장 작은 제목</h6>⚠️
제목 태그는 글자 크기 조절이 아닌 문서의 계층 구조 표현에 사용합니다. 글자 크기는 CSS로 조절하세요.
6. div와 span
| 태그 | 특성 | 용도 |
|---|---|---|
| <div> | 블록 레벨 (줄 전체 차지) | 큰 영역 묶음 |
| <span> | 인라인 (내용만큼만 차지) | 텍스트 일부 묶음 |
html
<div>이 영역은 한 줄 전체를 차지합니다.</div>
<p>이 문장에서 <span>이 부분만</span> 별도로 스타일을 줄 수 있습니다.</p>7. 목록 태그
순서 없는 목록 (ul)
html
<ul>
<li>사과</li>
<li>바나나</li>
<li>딸기</li>
</ul>순서 있는 목록 (ol)
html
<ol>
<li>재료를 준비한다</li>
<li>물을 끓인다</li>
<li>재료를 넣는다</li>
</ol>중첩 목록
html
<ul>
<li>과일
<ul><li>사과</li><li>바나나</li></ul>
</li>
<li>채소
<ul><li>당근</li><li>시금치</li></ul>
</li>
</ul>8. 주석
html
<!-- 이것은 주석입니다. 화면에 표시되지 않습니다. -->