HTML
원본:
1-HTML.pdf· 상위: 웹 기초 MOC
한 줄 요약
웹 문서의 구조(마크업) 를 정의하는 언어. HTML5 기준으로 시맨틱 태그와 입력·미디어 태그를 사용한다.
목차 (강의 구성)
- HTML 개요
- HTML5 태그
1. HTML 개요
역사·배경
- 팀 버너스리가 HTML 제안
- 버전 흐름: HTML1(1991) → 2 → 3 → 4 → HTML5(2014)
- 브라우저 전쟁, 플러그인, 웹 2.0, WHATWG
- HTML5 필요성: 앱 수준의 웹, Electron, React Native 등
개발 환경
- Chrome + VS Code (+ 플러그인)
- 기본 HTML 페이지 작성, 자동완성
- Chrome 개발자 도구
2. HTML5 태그
용어·구조
| 개념 | 설명 |
|---|---|
| 시작/끝 태그 | <tag></tag> |
| 속성 | 이름="값" |
| 주석 | <!-- 주석 --> (화면 미표시, 소스에는 노출) |
head 안 주요 태그:
| 태그 | 역할 |
|---|---|
meta | 문서 메타 정보 |
title | 페이지 제목 |
script | 스크립트 |
link | 외부 파일 연결 |
style | 스타일 |
base | 기본 경로 |
글자 태그
- 제목:
h1~h6 - 본문:
p,br,hr,pre등 - 앵커:
a(href) - 형태:
b,i,small,sub,sup,ins,del - 루비:
ruby,rt,rp
목록·표·미디어
| 구분 | 태그 |
|---|---|
| 목록 | ul / ol + li, 정의 목록 dl dt dd |
| 표 | table tr th td (+ 속성) |
| 이미지 | img (src, alt 등) |
| 오디오 | audio + source |
| 비디오 | video + source |
입력 양식
form+input(type: text, password, checkbox, radio, file …)- HTML5 type: email, url, number, date 등
label,textarea,select/optionfieldset+legend
공간 분할·시맨틱
div(블록),span(인라인)- display: block / inline 개념
- 시맨틱:
headernavmainsectionarticleasidefooter등
최소 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>문서 제목</title>
</head>
<body>
<header><h1>제목</h1></header>
<main>
<p>본문</p>
<a href="https://example.com">링크</a>
</main>
</body>
</html>
체크리스트
- DOCTYPE +
htmlheadbody구조 - 의미에 맞는 시맨틱 태그
- 이미지
alt, 링크href - form 요소와
label연결