HTML에는 특별한 의미를 가진 텍스트를 정의하기 위한 몇 가지 요소가 포함되어 있다.
예로 글자를 굵게, 이태릭(기울기), 아래첨자, 위첨자 등의 형식을 설정할 수 있다.
| <!DOCTYPE html> <html> <body> <p><b>글자 굵게</b></p> <p><i>글자 이탤릭</i></p> <p>글자는<sub> 아래첨자</sub> 와 <sup>위첨자</sup></p> </body> </html> |
HTML 형식 요소
형식 요소에는 글자의 특별한 형식을 표시하기 위해 설계되었다.
| 태그 | 내용 |
| <b> | 굵은 글자 |
| <strong> | 중요한 글자 |
| <i> | 이태릭 글자 |
| <em> | 강조된 글자 |
| <mark> | 마크된 글자 |
| <small> | 작은 글자 |
| <del> | 삭제된 글자 |
| <ins> | 삽입된 글자 |
| <sub> | 아래첨자 글자 |
| <sup> | 위첨자 글자 |
HTML <b>와 <strong> 요소
HTML <b>요소는 굵은 글자이지만 어떤 추가적인 중요한 의미를 포함하고 있지 않다.
즉 단순히 글자를 굵게 표시한다.
| 예제 |
| <!DOCTYPE html> <html> <body> <p>이것은 정상 글자이다..</p> <p><b>이 글자는 굵은 글자이다..</b></p> </body> </html> |
HTML <strong> 요소는 텍스트를 매우 중요하게 정의한다. 내부의 내용은 일반적으로 굵게 표시된다.
| <!DOCTYPE html> <html> <body> <p>이것은 정상 글자이다..</p> <p><strong>이 글자는 굵은 글자이다..</strong></p> </body> </html> |
 |
<b>와 <strong> 요소의 차이는 화면 낭독기에서 차이가 난다. <b>요소는 일반적으로 읽지만, <strong>요소 내의 글자는 강조하면서 읽는다.
HTML <i>와 <em> 요소
HTML <i> 요소는 대체 음성 또는 분위기에서 텍스트의 일부를 정의한다. 내부의 내용은 일반적으로 기울임꼴로 표시된다.
팁: <i> 태그는 기술 용어, 다른 언어의 구문, 생각, 선박 이름 등을 나타낼 때 자주 사용된다.
| 예제 |
| <!DOCTYPE html> <html> <body> <p>이 글자는 정상이다.</p> <p><i>이 글자는 이태릭이다.</i></p> </body> </html> |
HTML <em> 요소는 강조된 텍스트를 정의한다. 내부의 내용은 일반적으로 기울임꼴로 표시된다.
팁: 화면 판독기는 언어적 강세를 사용하여 <em>의 단어를 강조하여 발음한다.
| 예제 |
| <!DOCTYPE html> <html> <body> <p>이 글자는 정상이다.</p> <p><em>이 글자는 이태릭이다.</em></p> </body> </html> |
HTML <small> 요소
| 예제 |
| <!DOCTYPE html> <html> <body> <p>이것은 정상 글자이다.</p> <p><small>이것은 좀더 적은 글자이다.</small></p> </body> </html> |
HTML <mark> 요소
HTML <mark> 요소는 표시하거나 강조 표시해야 하는 텍스트를 정의한다:
| 예제 |
| <!DOCTYPE html> <html> <body> <p>오늘 <mark>우유를</mark> 사는 것을 잊지 마세요.</p> </body> </html> |
HTML <del> 요소
HTML <del> 요소는 문서에서 삭제된 텍스트를 정의한다. 브라우저는 일반적으로 삭제된 텍스트를 통해 행을 표시한다:
| 예제 |
| <!DOCTYPE html> <html> <body> <p>내가 가장 좋아하는 색은 <del>파랑색</del> 빨강색이다.</p> </body> </html> |
HTML <ins> 요소
HTML <ins> 요소는 문서에서 추가된 텍스트를 정의한다. 브라우저는 일반적으로 추가된 텍스트를 통해 행을 표시한다:
| 예제 |
| <!DOCTYPE html> <html> <body> <p>내가 가장 좋아하는 색은 <del>파랑색</del> <ins>빨강색<ins>이다.</p> </body> </html> |
HTML <sub> 요소
HTML <sub> 요소는 첨자 텍스트를 정의한다. 첨자 텍스트는 보통 줄 아래의 절반 문자로 나타나며, 때때로 더 작은 글꼴로 렌더링된다.
| 아래첨자 예제 |
| <!DOCTYPE html> <html> <body> <p>이것은 <sub>아래첨자</sub> 글자이다.</p> </body> </html> |
HTML <sup> 요소
HTML <sup> 요소는 상위 스크립트 텍스트를 정의한다. 대문자 텍스트는 보통 줄 위의 절반 문자로 나타나며, 때때로 더 작은 글꼴로 렌더링된다.
| 위첨자 에제 |
| <!DOCTYPE html> <html> <body> <p>이것은 <sup>위첨자</sup> 글자이다.</p> </body> </html> |
마무리
이번 글에서는 글자의 형식을 정하는 요소에 대해 살펴보았다.<b>, <em>, <i>, <small>, <strong>, <sub>, <sup>, <ins>, <del>, <mark> 요소를 학습하였다.
보기보다는 간단한 예제이므로 vscode를 실행시켜 코드를 꼭 실행해보자.
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML 주석(Comments) (0) | 2023.04.20 |
|---|---|
| HTML 인용(Quotation)과 인용요소(Citation Elements) (0) | 2023.04.19 |
| HTML 스타일(Styles) (0) | 2023.04.16 |
| HTML 단락(Paragraphs) (0) | 2023.04.15 |
| HTML 제목(Headings) (0) | 2023.04.14 |
댓글