[HTML] 텍스트 태그 <br>, <b>, <strong>, <u>, <i>, <em>, <mark>, <hr>
2021. 6. 19. 21:15
728x90
01 강조 효과 // <b>, <strong>
- 텍스트를 굵게 표현.
- <b>태그는 단순히 화면의 텍스트를 굵게 표현.
- <strong>태그는 텍스트를 굵게 표현해주고 그 내용이 중요하다는 의미도 함께 포함.
<b> = bold
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>타이포그래피</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<p>국회의원은 <b>국가이익을</b> 우선하여 양심에 따라 직무를 행한다.</p>
<p>모든 국민의 <strong>재산권은</strong> 보장된다.</p>
</body>
</html>
02 밑줄 // <u>
<u> = underline
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>타이포그래피</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<p>국회의원은 국가이익을 우선하여 양심에 따라 직무를 행한다.</p>
<p><u>모든 국민의 재산권은 보장된다.</u></p>
</body>
</html>
03 이탤릭체 강조 효과 // <i>, <em>
- <i>태그는 단순히 화면의 텍스트를 이탤릭체로 표현.
- <em>태그는 텍스트를 이탤릭체로 변환해주고 그 내용이 중요하다는 의미도 함께 포함.
<i> = italic<em> = emphasis
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>타이포그래피</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<p>국회의원은 국가이익을 <i>우선하여</i> 양심에 따라 직무를 행한다.</p>
<p><em>모든 국민의 재산권은 보장된다.</em></p>
</body>
</html>
04 하이라이팅 효과 // <mark>
- 텍스트에 하이라이팅(highlighting) 효과를 적용.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>타이포그래피</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<p>국회의원은 국가이익을 우선하여 양심에 따라 직무를 행한다.</p>
<p><mark>모든 국민의 재산권은 보장된다.</mark></p>
</body>
05 수평 가로 구분선 // <hr>
- 단락을 나눌 때나 내용상의 구분을 표현하고자 할 때 수평 가로 구분선을 사용.
<hr> = horizontal rule
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>타이포그래피</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<p>국회의원은 국가이익을 우선하여 양심에 따라 직무를 행한다.</p>
<hr>
<p>모든 국민의 재산권은 보장된다.</p>
</body>
</html>728x90
'HTML > Study' 카테고리의 다른 글
| [HTML] 하이퍼링크 태그 <a>, href, title, target (1) | 2021.06.21 |
|---|---|
| [HTML] 이미지 태그 <img>, src, alt / 멀티미디어 태그 <video>, <audio> (1) | 2021.06.21 |
| [HTML] 목록 태그 <ul>, <ol>, <li>, <dl>, <dt>, <dd> (1) | 2021.06.19 |
| [HTML] 텍스트 태그 <h1> ~ <h6>, <p>, <br>, <pre> (1) | 2021.06.19 |
| [HTML] !DOCTYPE html, html, head, meta, meta charset='utf-8', title, body (1) | 2021.06.19 |
