✅ 학습 목표
- HTML의 발전 과정 이해
- HTML 기본 구조 및 태그 학습
- 웹 문서 작성 기본 능력 배양
1. HTML 역사 요약
| 시대 | 주요 특징 |
|---|
| 1990년대 초 | 팀 버너스리가 HTML 제안, 단순 문서 구조 |
| 1990년대 중후반 | HTML 2.0~4.0 발전, 표, 이미지, 폼 등 추가 |
| 2000년대 | XHTML로 문법 강화, 웹 표준 강조 |
| 2010년대 이후 | HTML5 등장, 멀티미디어, 모바일 지원 강화 |
🌐 HTML5 핵심 기능
<video>, <audio> 등 멀티미디어<canvas>, 웹 스토리지, 지오로케이션 등 API- 반응형 디자인 지원 (
<meta viewport>)
2. HTML 기본 문서 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>나의 첫 HTML 문서</title>
</head>
<body>
</body>
</html>
3. 글자 관련 태그 정리
| 태그 | 설명 |
|---|
<h1>~<h6> | 제목 태그 (숫자 작을수록 큼) |
<p> | 단락 (문단) |
<b>, <strong> | 굵게 표시 / 의미 강조 |
<i>, <em> | 기울임 / 의미 강조 |
<mark> | 형광펜 효과 |
<u> | 밑줄 |
<s>, <del> | 취소선 / 삭제선 |
<small> | 작은 글자 |
<sup>, <sub> | 윗첨자 / 아랫첨자 |
<abbr> | 마우스 오버 툴팁 |
<q>, <blockquote> | 인라인/블록 인용구 |
<code>, <pre> | 코드 표현 / 서식 유지 |
<kbd>, <samp>, <var> | 키보드 입력 / 샘플 출력 / 변수 표현 |
4. 목록 관련 태그
<ul>
<li>순서 없는 항목</li>
</ul>
<ol type="1" start="3" reversed>
<li>역순 번호 매기기</li>
</ol>
<ul>: 순서 없는 목록<ol>: 순서 있는 목록 (type, start, reversed)<li>: 목록 항목
5. 표 관련 태그
<table border="1">
<thead>
<tr><th>제목 1</th><th>제목 2</th></tr>
</thead>
<tbody>
<tr><td>내용 1</td><td>내용 2</td></tr>
<tr><td colspan="2">병합된 내용</td></tr>
</tbody>
<tfoot>
<tr><th colspan="2">요약</th></tr>
</tfoot>
</table>
<table>: 표 생성<thead>, <tbody>, <tfoot>: 표 구성<tr>: 행, <th>: 제목 셀, <td>: 데이터 셀colspan, rowspan: 셀 병합
6. 연습 문제: 제품 리스트 표 구현
<table border="1">
<thead>
<tr>
<th>제품리스트</th><th>코드</th><th>분류</th><th>가격</th><th>구매가능개수</th>
</tr>
</thead>
<tbody>
<tr><td>01-468</td><td>봄</td><td>200,000원</td><td>1068</td></tr>
<tr><td>01-223</td><td>여름</td><td>200,000원</td><td>976</td></tr>
<tr><td>01-468</td><td>가을</td><td>200,000원</td><td>1205</td></tr>
<tr><td>01-245</td><td>겨울</td><td>200,000원</td><td>537</td></tr>
</tbody>
<tfoot>
<tr><td colspan="2">총합</td><td>800,000원</td><td>3786</td></tr>
</tfoot>
</table>
7. Velog에 HTML 코드 작성 팁
- 코드 블록 사용:
```html 로 감싸기
- 들여쓰기와 줄 나눔 정리하여 가독성 높이기
📘 느낀점
- HTML의 발전 과정을 통해 웹의 역사와 기술 트렌드를 이해할 수 있었음
- 기본 태그들을 직접 실습하며 웹 구조를 이해하는 데 도움이 됨
- 웹 표준과 접근성의 중요성을 다시금 체감함
