안녕하세요
오늘은 여러 가지 글자 서식 태그를 알아봅시다
글자 서식 태그는 말 그대로 글자의 서식을 지정하는 태그를 말합니다
<!DOCTYPE html> <html> <head> <title>TMP</title> </head> <body> <p><b>Bold</b></p> <p><strong>Strong</strong></p> <p><i>Italic</i></p> <p><em>Emphasized</em></p> <p><mark>Marked</mark></p> <p><small>Small</small></p> <p><del>Deleted</del></p> <p><ins>Inserted</ins></p> <p><sub>Subscript</sub></p> <p><sup>Superscript</sup></p> </body> </html>이렇게 코드를 작성해봤어요
알아볼 태그는 b, strong, i, em, mark, small, del, ins, sub, sup
이렇게 한 번 하나하나 알아볼게요
Bold
Bold 태그입니다
<b> 태그를 사용합니다
bold의 한국어 뜻인 '선명한, 굵은'에 맞게 글자가 두꺼워진 것을 알 수 있습니다
Strong
<strong> 태그를 사용하고 Bold와 기능은 같습니다
Italic
<i> 태그를 사용하고 글씨체가 기울어져서 표시되는 것을 알 수 있습니다
Emphasized
<em> 태그를 사용하고, 사진에서도 보이듯이 italic과 같은 기능으로 작동됩니다
Marked
<mark> 태그를 사용하여 형광펜 효과를 나타냅니다
Small
<small> 태그를 사용하며 말 그대로 글씨를 작게 표시합니다
Deleted
<del> 태그를 사용하고, 글자의 중앙에 가로로 선이 그어집니다
Inserted
<ins> 태그를 사용하며, 밑줄을 쳐줍니다
Subscript
Superscript
위의 subscript와 superscript는 각각 <sub>과 <sup> 태그로 작동합니다
얼핏 보면 같은 기능을 나타내는 것 같지만 글자가 작아짐과 동시에 subscript는 글자가 아래로 정렬되어 있고
superscript는 글자가 위에서 정렬되어 있음을 알 수 있습니다
이렇게 간단하게 글자 서식 태그를 알아보았는데요
나중에 css를 이용할 수도 있지만 html로 간편하게 만들 수 있다는 것을 알고 계시면 좋을 것 같습니다
'Programming > HTML, CSS' 카테고리의 다른 글
| [HTML/CSS] #7 이미지 삽입하기, 비율 조정, alt (0) | 2022.01.04 |
|---|---|
| [HTML/CSS] #6. 링크 삽입하기 (0) | 2021.12.22 |
| [HTML/CSS] #5. 주석 작성하기 (0) | 2021.12.20 |
| [HTML/CSS] #3. h1 ~ h6, p, br 태그 (0) | 2021.12.20 |
| [HTML/CSS] #2. html의 구조, title, h1, p (0) | 2021.12.20 |
| [HTML/CSS] #1. Visual Studio Code 설치하기 (0) | 2021.12.19 |
댓글