![[HTML & CSS] HTML 기본태그 2](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FEoZOm%2FbtrLEHgPjHg%2FF2mKmy6ypw3zFhk5r6fZu0%2Fimg.png)
728x90
이전글 HTML 기본태그의 연장입니다.
1. <b>와 <strong> 태그
1-1. <b> 태그
<b>~</b>태그는 Bold의 약자로, 텍스트를 굵게 칠해주는 역할을 합니다.
<b> 텍스트를 굵게 표시하는 태그입니다. </b>
예시)
<!DOCTYPE HTML>
<html>
<head>
<title> Text Formatting Tag </title>
<meta charset="UTF-8">
</head>
<body>
<b> 텍스트를 굵게 표시하는 태그입니다. </b>
</body>
</html>
결과)
1-2. <strong> 태그
<strong>~</strong>태그는 텍스트를 굵게 칠하면서 의미를 강조하는 태그입니다.
예시)
<!DOCTYPE HTML>
<html>
<head>
<title> Text Formatting Tag </title>
<meta charset="UTF-8">
</head>
<body>
<strong> "b"태그와 비슷하게 텍스트가 굵게 표시됩니다. </strong>
</body>
</html>
결과)
3. <i>와 <em> 태그
3-1. <i> 태그
<i>~</i> 태그는 italic의 약자로, 텍스트를 이텔릭체로 바꿔주는 역할을 하는 태그입니다.
<i> 텍스트를 이텔릭체로 바꿔줍니다. </i>
예시)
<!DOCTYPE HTML>
<html>
<head>
<title> Text Formatting Tag </title>
<meta charset="UTF-8">
</head>
<body>
<i> 텍스트를 이텔릭체로 바꿔줍니다. </i>
</body>
</html>
결과)
3-2. <em> 태그
<em>~</em> 태그는 emphasize의 약자로, 텍스트를 이텔릭체로 바꿔줍니다.
<em> 텍스트를 이텔릭체로 바꿔줍니다. </em>
예시)
<!DOCTYPE HTML>
<html>
<head>
<title> Text Formatting Tag </title>
<meta charset="UTF-8">
</head>
<body>
<em> 텍스트를 이텔릭체로 바꿔줍니다. </em>
</body>
</html>
결과)
4. <small> 태그
<small>~</small>태그는 텍스트를 작게 출력하는 태그입니다.
예시)
<!DOCTYPE HTML>
<html>
<head>
<title> Text Formatting Tag </title>
<meta charset="UTF-8">
</head>
<body>
<small> 텍스트를 작아지게 하는 태그입니다. </small>
</body>
</html>
결과)
5. <sup>와 <sub> 태그
5-1. <sup> 태그
<sup>~</sup>태그는 super subscript의 약자로, 윗 첨자를 사용하고 싶을때 이용합니다.
예시로 2^2를 표현할때 사용합니다. => 22 = 4
예시)
<!DOCTYPE HTML>
<html>
<head>
<title> Text Formatting Tag </title>
<meta charset="UTF-8">
</head>
<body>
super subsrcipt<sup>1)</sup>
</body>
</html>
결과)
5-2. <sub> 태그
<sub>~</sub>는 subscript의 약자로, 밑 첨자를 넣을때 사용합니다.
예시)
<!DOCTYPE HTML>
<html>
<head>
<title> Text Formatting Tag </title>
<meta charset="UTF-8">
</head>
<body>
subsrcipt<sub>1)</sub>
</body>
</html>
결과)
6. <ins>와 <del> 태그
6-1. <ins>
<ins>~</ins>태그는 insert의 약자이며, 텍스트를 삽입했을때 밑줄을 그어주는 태그입니다.
예시)
<!DOCTYPE HTML>
<html>
<head>
<title> Text Formatting Tag </title>
<meta charset="UTF-8">
</head>
<body>
<ins> 밑줄을 그어주는 태그입니다. </ins>
</body>
</html>
결과)
6-2. <del>
<del>~</del>태그는 delete의 약자이며, 텍스트를 삭제했을때 취소선을 그어주는 태그입니다.
예시)
<!DOCTYPE HTML>
<html>
<head>
<title> Text Formatting Tag </title>
<meta charset="UTF-8">
</head>
<body>
<del> 취소선을 그어주는 태그입니다. </del>
</body>
</html>
결과)
7. <mark> 태그
<mark>~</mark>태그는 텍스트를 형광펜으로 강조할때 사용하는 태그입니다.
예시)
<!DOCTYPE HTML>
<html>
<head>
<title> Text Formatting Tag </title>
<meta charset="UTF-8">
</head>
<body>
<mark> 텍스트에 형광펜으로 강조해주는 태그입니다. </mark>
</body>
</html>
결과)
728x90
'[WEB] > [HTML & CSS]' 카테고리의 다른 글
| [HTML & CSS] HTML 기본태그 4 - <img>, <list>, <table> (0) | 2022.09.09 |
|---|---|
| [HTML & CSS] HTML 기본태그 3 - <q>, <abbr>, <Link> (0) | 2022.09.08 |
| [HTML & CSS] HTML 기본태그 (0) | 2022.09.08 |
| [HTML & CSS] HTML 기본 구조와 구성 요소 (0) | 2022.09.08 |
| [HTML & CSS] HTML 주석 태그 <!-- --> (0) | 2022.09.08 |