1. 종류와 중요도 태그
현재 HTML5 는 CSS와 완전히 구분되어 있기 때문에 중요도에 따른 태그만 사용한다.
태그 종류
| 태그 | 설명 |
| b | 글자를 굵게 |
| <strong> </strong> | 중요한 내용임을 명시 (굵게 표현 포함) // strong {내용} + tab 작성 가능 |
| i | 글자를 기울임 |
| em | 강조할 내용임을 명시 (기울기 포함) // em {내용} + tab 작성 가능 |
즉, 요즘은 b, i 같은 태그는 CSS로 대체하므로 사용하지 않는다.
[VS Code]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>
<strong>
경고!
</strong>
이것은 매우 위험합니다.
<br><br><br>
나는 <strong>
당근을
</strong> 사랑합니다
<br>
나는 당근을
<strong>
사랑합니다
</strong>
<br><br><br><br>
나는 <strong>
<em>당근을</em>
</strong> 사랑합니다 <br>
나는 당근을 <strong>
<em>사랑합니다</em>
</strong>
</p>
</body>
</html>
[웹 페이지 결과]
2. 첨자 태그
| 태그 | 설명 | 비고 |
| <sup> // sup{내용} + tab 가능 |
위 첨자 | 지수, 서수, 제곱 |
| <sub> // sub{내용} + tab 가능 |
아래 첨자 | 각주, 변주, 화학식 |
[VS Code]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>
<strong>
1<sup>st</sup> <br>
2<sup>nd</sup> <br>
3<sup>rd</sup> <br>
4<sup>th</sup>
</strong>
</p>
<p>
<strong>
H<sub>2</sub>O <br>
</strong>
</p>
</body>
</html>[웹 페이지 출력 결과]
3. 밑 줄, 취소선 태그
| 태그 | 설명 | 비고 |
| <u> </u> | 밑줄 표시 (철자 오류 표시) | 예전에는 밑줄 용도로 사용 |
| <s> </s> | 취소선 표시 (더 이상 유효하지 않은 정보 표시) |
[VS Code]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>
이건 <u>밑줄</u>이고 <br>
이건 <s>취소선</s>이야
</p>
</body>
</html>[웹 페이지 출력 결과]
<결론>
| 태그 | 설명 |
| <strong> </strong> strong{내용} + tab 가능 |
중요도 표시 (굵기) |
| <em> </em> em{내용} + tab 가능 |
기울기 표시 |
| <sup> </sup> | 윗 첨자 |
| <sub> </sub> | 아랫 첨자 |
| <u> </u> | 밑줄 |
| <s> </s> | 취소선 |
'프론트엔드 학습 > HTML' 카테고리의 다른 글
| 6. HTML - 이미지 넣기 (0) | 2023.06.29 |
|---|---|
| 5. HTML - 용어와 정의 나열 (0) | 2023.06.28 |
| 4. HTML - 목록 표시 (0) | 2023.06.28 |
| 3. 인용_속성/특성 (0) | 2023.06.28 |
| 1. VS Code + HTML 기본 문법 (5) | 2023.06.27 |
