All about WEB/All about HTML

9. HTML 텍스트 서식(Text Formatting)

Tag story 2021. 6. 15. 09:40

① 서식 요소(Formatting elements)는 텍스트에 특별한 의미를 부여하기 위한 요소이다.

  ㉠<b> - Bold text

    ⓐ <b> 요소는 요소 내의 텍스트를 웹브라우저에 굵게 표시되게 한다.

 

<body>
<b>Bold text</b>
</body>
view raw example.html hosted with ❤ by GitHub
Bold text

 

  ㉡ <strong> - Important text

    ⓐ <strong> 요소는 요소 내의 텍스트를 웹브라우저에 굵게 표시되게 해주며, 그 내용이 중요하다는 의미도 포함시킨다.

 

<body>
<strong>Important text</strong>
</body>
view raw example.html hosted with ❤ by GitHub
Important text

 

  ㉢ <i> - Italic text

    ⓐ <i> 요소는 요소 내의 텍스트를 웹브라우저에 기울임꼴로 표시되게 한다.

 

<body>
<i>Italic text</i>
</body>
view raw example.html hosted with ❤ by GitHub
Italic text

 

  ㉣ <em> - Emphasized text

    ⓐ <em> 요소는 요소 내의 텍스트를 웹브라우저에 기울임꼴로 표시되게 해주며, 그 내용이 중요하다는 의미도 포함시킨다.

 

<body>
<em>Emphasized text</em>
</body>
view raw example.html hosted with ❤ by GitHub
Emphasized text

 

  ㉤ <mark> - Marked text

    ⓐ <mark> 요소는 요소 내의 텍스트를 웹브라우저에 형광펜칠된 상태로 표시해준다.

 

<body>
<mark>Marked text</mark>
</body>
view raw example.html hosted with ❤ by GitHub
Marked text

 

  ㉥ <small> - Smaller text

    ⓐ <small> 더 작은 텍스트를 정의한다.

 

<body>
<small>Smaller text</small>
</body>
view raw example.html hosted with ❤ by GitHub
Smaller text

 

  ㉦ <del> - Deleted text

    ⓐ <del> 태그는 취소선을 긋는 효과를 적용시켜 준다.

 

<body>
<del>Deleted text</del>
</body>
view raw example.html hosted with ❤ by GitHub
Deleted text

 

  ㉧ <ins> - Inserted text

    ⓐ <ins> 태그는 텍스트에 밑줄을 긋는 효과를 적용시켜 준다.

 

<body>
<ins>Inserted text</ins>
</body>
view raw example.html hosted with ❤ by GitHub
Inserted text

 

  ㉨ <sub> - Subscript text

    ⓐ <sub> 텍스트를 아래 첨자로 만드는 효과를 적용시켜 준다.

 

<body>
Text<sub>Subscipt text</sub>
</body>
view raw example.html hosted with ❤ by GitHub
TextSubscipt text

 

  ㉩ <sup> - Superscript text

    ⓐ <sup> 텍스트를 위 첨자로 만드는 효과를 적용시켜 준다.

 

<body>
Text<sup>Superscript text</sup>
</body>
view raw example.html hosted with ❤ by GitHub
TextSuperscript text

 

  ㉪ 각 텍스트 형식 요소를 비교해보면 다음과 같다.

 

<body>
<b>굵게</b>
<strong>굵게+중요함</strong>
<i>기울임꼴</i>
<em>기울임꼴+중요함</em>
<mark>하이라이트</mark>
<small>작게</small>
<del>취소선</del>
<ins>밑줄</ins>
<sub>아래</sub>
<sup>위</sup>
</body>
view raw example.html hosted with ❤ by GitHub
굵게 굵게+중요함 기울임꼴 기울임꼴+중요함 하이라이트 작게 취소선 밑줄 아래 위
저작자표시

'All about WEB > All about HTML' 카테고리의 다른 글

11. HTML 주석(Comments)  (0) 2021.06.15
10. HTML 인용구 요소(Quotation and Citation Elements)  (0) 2021.06.15
8. HTML 단락(Paragraphs)  (0) 2021.06.05
7. HTML 제목 (Headings)  (0) 2021.06.05
6. HTML 속성(attribute)  (0) 2021.06.05

'All about WEB/All about HTML' Related Articles

티스토리툴바