본문 바로가기
Front-End/HTML

[HTML] 텍스트 관련 태그

by 찐코딩 2021. 10. 21.

* font 태그 : 글자와 관련된 태그

 

 text 서식과 관련된 태그 
* b 태그 : 텍스트 글자를 굵은 글자로 만들어주는 태그

* i 태그 : 텍스트 글자를 이탤릭체(기울어짐)로 만들어주는 태그
* small 태그 : 텍스트 글자를 작은 글자로 만들어주는 태그
* sub 태그 : 텍스트 글자를 아랫첨자로 만들어주는 태그
* sup 태그 : 텍스트 글자를 윗첨자로 만들어주는 태그
* ins 태그 : 텍스트 글자를 밑줄 글자로 만들어 주는 태그.
* del 태그 : 텍스트 글자를 취소선이 그어진 글자로 만들어주는 태그.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>텍스트와 관련된 태그</title>
</head>
<body>
		<p><b> 이것은 볼드체입니다.</b></p>
		<p><i>이것은 이탤릭체입니다.</i></p>
		<h3>이것은<small>small</small> 태그 입니다.</h3>
		<p>H<sub>2</sub>O / CO<sub>2</sub></p> <!-- 아랫첨자 -->
		<p>X<sup>2</sup> + Y<sup>2</sup></p> <!-- 윗첨자 -->

</body>
</html>

 

 

다음은 HTML5에서 mark 태그로 형광펜 효과를 나타내기

 

* mark 태그 : 텍스트에 형광펜 그은 효과

* strong 태그 : 텍스트 굵게

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
  <!-- <mark> : 형광펜 태그-->
  <p><mark>형광펜 효과</mark></p>
  <!-- <strong> : 굵게 -->
  <!-- <b> : 굵게 -->
  <!-- <i> : 이탤릭체 -->
  <p><strong><i>굵고 이탤릭체</i></strong></p>
  <p><b>굵은 글씨체</b></p>
  
  <hr/>
  
  [참고사이트] : <a href="http://w3schools.com" target="_blank">[사이트 이동]</a>
  
 </body>
</html>

'Front-End > HTML' 카테고리의 다른 글

[HTML] 이미지 태그(img 태그)  (0) 2021.10.25
[HTML] 목록 태그(ul, ol, li 태그)  (0) 2021.10.25
[HTML] a링크 태그  (0) 2021.10.06
[HTML] HR태그(선 그리기 태그)  (0) 2021.10.06
[HTML] font 태그  (0) 2021.10.06

댓글