태그
: HTML 문서에서 요소를 정의하고 구조를 나타냄
<기본 구조 태그>
- <!DOCTYPE html> : 문서의 형식을 정의하는 선언 태그
- <html> : HTML 문서의 시작과 끝을 감싸는 루트 요소
- <head> : 문서의 메타 데이터와 스타일, 스크립트 등을 정의하는 요소
- <title> : 문서의 제목을 정의하는 요소
- <body> : 문서의 본문을 감싸는 요소
<텍스트 관련 태그>
- <p> : 단락을 나타내는 태그 - Block
- <h1> ~ <h6> : 제목을 나타내는 태그 (크기순으로 1이 가장 큰 제목) - Block
- <a> : 하이퍼링크를 정의하는 태그 - Inline
- <strong> : 강조된 텍스트를 나타내는 태그 - Inline
- <em> : 강조된 텍스트를 기울여 나타내는 태그 - Inline
- <span> : 인라인 요소를 감싸 스타일이나 이벤트를 적용하는 컨테이너 - Inline
- <div> : 블록 수준의 컨테이너를 나타내는 태그 - Block
예시) 태그를 이용한 제목 설정
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>제목1</h1>
<h3>제목1</h3>
<h5>제목1</h5>
</body>
</html>
예시) 태그에 하이퍼링크 달기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>이상혁은 <a href="https://namu.wiki/w/%EB%A6%AC%EA%B7%B8%20%EC%98%A4%EB%B8%8C%20%EB%A0%88%EC%A0%84%EB%93%9C%20%EC%9B%94%EB%93%9C%20%EC%B1%94%ED%94%BC%EC%96%B8%EC%8B%AD">리그오브레전드 챔피언쉽</a> 4회 우승을 하였다.</div>
</body>
</html>l
<리스트와 표 관련 태그>
- <ul> : 비순서 목록을 정의하는 태그 - Block
- 이 붙음
- <ol> : 순서 목록을 정의하는 태그 - Block
- 2. 3. 이 붙음
- <li> : 목록의 각 항목을 정의하는 태그 - Block
- <dl> : 설명 목록을 정의하는 태그 - Block
- <dt> : 설명 목록의 용어(용어 제목)를 정의하는 태그 - Block
- <dd> : 설명 목록의 설명(용어에 대한 설명)을 정의하는 태그 - Block
- <table> : 표를 정의하는 태그 - Block
- <tr> : 표의 행을 정의하는 태그 - Block
- <th> : 표의 헤더 셀을 정의하는 태그 - Block
- <td> : 표의 데이터 셀을 정의하는 태그 - Block
예시) 태그를 이용한 리스트 작성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>계란 3개</li>
<li>간장(2큰술)</li>
<li>맛술(1큰술)</li>
<li>소금(조금)</li>
</ul>
<ol>
<li>계란을 잘 풀고, 조미료를 넣어줍니다.</li>
<li>계란말이팬에 잘 풀은 계란을 1/4만큼 조금씩 넣어줍니다.</li>
<li>반숙 상태가 되면 젓가락으로 조금씩 안쪽으로 말아줍니다.</li>
<li>이를 반복해서 끝까지 잘 구워줍니다.</li>
</ol>
</body>
</html>
예시) 태그를 이용한 테이블 작성 및 설정
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1">
<tr>
<th>플랜 이름</th>
<th>요금</th>
</tr>
<tr>
<td>두근 두근 플랜</td>
<td>월정액 29,000원</td>
</tr>
<tr>
<td>콩닥콩닥 플랜</td>
<td>월정액 19,000</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1">
<tr>
<td> 셀 1</td>
<td>셀 2</td>
</tr>
<tr>
<td>셀 3</td>
<td>셀 4</td>
</tr>
<tr>
<td>셀 5</td>
<td>셀 6</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="2"> 셀 1+2</th>
</tr>
<tr>
<td>셀 3</td>
<td>셀 4</td>
</tr>
<tr>
<td>셀 5</td>
<td>셀 6</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1">
<tr>
<th>셀 1</th>
<th>셀 2</th>
</tr>
<tr>
<td rowspan="2">셀 3+5</td>
<td>셀 4</td>
</tr>
<tr>
<td>셀 6</td>
</tr>
</table>
</body>
</html>
Share article