태그
: 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
