1. 목록 관련 태그 (ul, ol, dl)
✅ 목록 태그 개요
HTML에서 목록을 만들 때는 <ul>(순서 없는 목록), <ol>(순서 있는 목록), <dl>(정의 목록) 태그를 사용합니다.
비순차 목록 (Unordered List)
| 태그 | 설명 | 주요 속성 | 코드 예시 |
|---|---|---|---|
<ul> | 순서 없는 목록을 생성 | type (disc, circle, square) | html <ul type="circle"><li>항목 1</li><li>항목 2</li></ul> |
<li> | 목록의 항목을 생성 | type (개별 항목의 스타일 설정 가능) | html <li type="square">항목 3</li> |
✔️ 예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>비순차 목록 예제</title>
</head>
<body>
<h3>비순차 목록 예제</h3>
<ul type="disc">
<li>사과</li>
<li>바나나</li>
<li type="circle">포도</li>
</ul>
</body>
</html>
순차 목록 (Ordered List)
| 태그 | 설명 | 주요 속성 | 코드 예시 |
|---|---|---|---|
<ol> | 순서 있는 목록을 생성 | type (1, A, a, I, i), start | html <ol type="I" start="2"><li>항목 1</li></ol> |
<li> | 목록의 항목을 생성 | value (항목의 순서를 지정) | html <li value="5">항목 5</li> |
✔️ 예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>순차 목록 예제</title>
</head>
<body>
<h3>순차 목록 예제</h3>
<ol type="A" start="3">
<li>첫 번째 항목</li>
<li value="5">다섯 번째 항목</li>
<li>세 번째 항목</li>
</ol>
</body>
</html>
정의 목록 (Definition List)
| 태그 | 설명 | 주요 속성 | 코드 예시 |
|---|---|---|---|
<dl> | 정의 목록을 생성 | 없음 | html <dl><dt>HTML</dt><dd>HyperText Markup Language</dd></dl> |
<dt> | 정의할 단어 | 없음 | html <dt>웹 개발</dt> |
<dd> | 단어의 설명 | 없음 | html <dd>웹 사이트를 제작하는 기술</dd> |
✔️ 예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>정의 목록 예제</title>
</head>
<body>
<h3>정의 목록 예제</h3>
<dl>
<dt>HTML</dt>
<dd>웹 페이지를 구성하는 기본 언어</dd>
<dt>CSS</dt>
<dd>웹 페이지의 스타일을 지정하는 언어</dd>
<dt>JavaScript</dt>
<dd>웹 페이지의 동적 기능을 추가하는 언어</dd>
</dl>
</body>
</html>
2. 링크 관련 태그 (a)
✅ 하이퍼링크 개요
웹 페이지에서 링크를 만들 때 <a> 태그를 사용합니다.
| 태그 | 설명 | 주요 속성 | 코드 예시 |
|---|---|---|---|
<a> | 하이퍼링크를 생성 | href, target, rel, download | html <a href="<https://naver.com>" target="_blank">네이버</a> |
✔️ 예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>링크 예제</title>
</head>
<body>
<h3>링크 예제</h3>
<p>아래 링크를 클릭하면 네이버로 이동합니다.</p>
<a href="<https://naver.com>" target="_blank">네이버 바로가기</a>
</body>
</html>
3. 표 관련 태그 (table)
✅ 표 개요
HTML에서 표를 만들 때 <table> 태그를 사용합니다.
| 태그 | 설명 | 주요 속성 | 코드 예시 |
|---|---|---|---|
<table> | 표를 생성 | border, width, cellspacing, cellpadding | html <table border="1"><tr><td>데이터</td></tr></table> |
<tr> | 표의 행을 생성 | 없음 | html <tr><td>셀 1</td></tr> |
<td> | 표의 셀을 생성 | rowspan, colspan | html <td rowspan="2">합쳐진 셀</td> |
<th> | 표의 제목 셀 | 없음 | html <th>제목</th> |
✔️ 예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>표 예제</title>
</head>
<body>
<h3>표 예제</h3>
<table border="1" cellspacing="0" cellpadding="5">
<caption>과일 정보</caption>
<tr>
<th>이름</th>
<th>색깔</th>
<th>가격</th>
</tr>
<tr>
<td>사과</td>
<td>빨강</td>
<td>1000원</td>
</tr>
<tr>
<td>바나나</td>
<td>노랑</td>
<td>500원</td>
</tr>
</table>
</body>
</html>
인생 별거 없어