- HTML 개요
- 기본 태그
- 입력 양식 태그
- 공간 분할 태그
- 시맨틱 태그
HTML 개요
- HTML(HyperText Markup Language)은 웹 문서를 작성하는 마크업 언어
- HTML 문서는 태그 + 속성(attribute) 으로 구성
- 일반적인 구조는 아래와 같다:
<!DOCTYPE html>
<html>
<head>
<title>문서 제목</title>
</head>
<body>
콘텐츠 영역
</body>
</html>
기본 태그
텍스트 관련 태그
| 분류 |
태그 |
설명 |
| 제목 |
h1 ~ h6 |
숫자가 작을수록 큰 제목 |
| 본문 |
p, br, hr |
문단, 줄바꿈, 수평선 |
| 링크 |
a |
하이퍼링크 연결 |
| 강조 |
b, i, strong, em, sub, sup, ins, del |
텍스트 모양 및 강조 |
<h1>큰 제목입니다</h1>
<p>문단 내용입니다<br>줄바꿈도 가능해요.</p>
<a href="https://example.com">이동 링크</a>
<strong>중요한 텍스트</strong>, <em>강조 텍스트</em>
목록 태그
| 태그 |
설명 |
ul |
순서 없는 목록 (Unordered List) |
ol |
순서 있는 목록 (Ordered List) |
li |
목록 항목 (List Item) |
<h3>순서 없는 목록</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<h3>순서 있는 목록</h3>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
테이블 태그
| 태그 |
설명 |
table |
표 전체 |
tr |
행(Row) |
th |
열 제목(Header) |
td |
셀 데이터(Data) |
<table border="1">
<caption>사용자 목록</caption>
<tr>
<th>이름</th>
<th>아이디</th>
</tr>
<tr>
<td>김소현</td>
<td>a101</td>
</tr>
</table>