저번 포스팅에서는 <h1> ~ <h6> 요소와 <p> 요소에 대해 알아보았는데요.
이번에는 텍스트에 특별한 기능을 더해주는 요소들에 대해 간단하게 포스트 해보려고 합니다!
HTML Formatting 요소에는 다음과 같은 종류들이 존재합니다.
| 요소 | 효과 및 의미 |
| <b> | 굵은 글씨체로 적용 |
| <strong> | 굴은 글씨체로 적용 (높은 중요도 요소) |
| <i> | 기울임꼴로 표시 (주로 외국어) |
| <em> | 기울임꼴로 표시 (강조할 때) |
| <mark> | 형광펜을 칠한 효과 |
| <del> | 취소 요소 |
| <sub> | 아래 첨자 요소 |
| <sup> | 윗 첨자 요소 |
CSS를 배우고 나면 이러한 요소를 사용하지 않고도 해당 효과들을 추가할 수 있으므로 굵은 글씨체를 표시하려고 <b> 요소를 사용해야겠다! 이렇다기 보다는 이 텍스트는 중요하니까 <b> 요소를 사용해서 표시해야겠다는 사고가 좀 더 적절해 보입니다!
아래는 Text formatting 요소를 사용한 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p><b>안녕하세요!</b></p>
<p>이번에는 <i>text formatting</i> 의 예제를 살펴봅시다.</p>
<p>H<sub>2</sub>O는 물분자를 의미하며 x<sup>2</sup>는 x의 제곱을 의미합니다.</p>
</body>
</html>이제 파일을 열어 브라우저에서 다음과 같이 표시가 되는 것을 알 수 있습니다.
'Web Programming' 카테고리의 다른 글
| [HTML] Images and Favicon (0) | 2023.02.12 |
|---|---|
| [HTML] HTML Links (0) | 2023.02.12 |
| [HTML] HTML Heading & Paragraph (0) | 2023.02.10 |
| [HTML] HTML Attributes (0) | 2023.02.09 |
| [HTML] HTML Element & Tag (0) | 2023.02.09 |