이전 글:
2020/03/09 - [HTML and CSS] - [HTML] 8. HTML 스타일
2020/03/09 - [HTML and CSS] - [HTML] 7. HTML 문단
우리는 글을 쓰다 보면 웹 사이트에 배경 색깔, 텍스트 색깔, 폰트 등의
스타일을 바꾸고 싶을 수도 있다.
하지만 모든 것이 <tagname style="property:value;">형식으로 표현되는 것은 아니다.
오늘은 텍스트의 서식을 변경하는 것에 대해서 알아보도록 하자.
이전 장에서 우리는 HTML 스타일 속성에 대해서 배웠다.
HTML은 스타일 이외에도 특별한 의미를 가진 텍스트를 정의할 수 있는 요소가 또 있다.
이런 요소 중에는 <b>와 <i>와 같이 텍스트 설정을 두껍게(bold) 혹은 이탤릭체(italic)로 변경하는 것이 있다.
특별한 타입의 텍스트를 보여기 위한 서식 설정에는 다음과 같은 것들이 있다.
- <b> - 두꺼운(bold) 텍스트
- <strong> - 중요한 텍스트
- <i> - 이탤릭체(italic) 텍스트
- <em> - 텍스트 강조(emphasize)
- <mark> - 텍스트에 마킹하기(mark)
- <small> - 작은(small) 텍스트
- <del> - 텍스트 삭제(delete)
- <ins> - 텍스트 삽입(insert)
- <sub> - 텍스트 아래 기입(subscript)
- <sup> - 텍스트 위 기입(superscript)
그럼 하나하나씩 예시를 보도록 하자.
1. HTML <b>와 <strong> 요소
HTML <b>요소는 따로 중요하지는 않지만 두꺼운 글씨로 정의하고 싶을 때 사용한다.
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
</body>
</html>
반면에 <strong>요소는 강한 텍스트를 정의한다. 즉, 의미론적으로 "강하게" 중요한 텍스트에 쓰인다.
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><strong>This text is strong.</strong></p>
</body>
</html>
2. HTML <i>와 <em> 요소
HTML <i>요소는 이탤릭체 텍스트를 정의한다.
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><i>This text is italic.</i></p>
</body>
</html>
HTML <em>는 이탤릭체이면서 중요한 텍스트에 사용한다.
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><em>This text is emphasized.</em></p>
</body>
</html>
브라우저에서 검색할 때는 <strong>이 <b>로, <em>이 <i>로 보인다.
하지만 이러한 tag에는 다른 의미가 숨어있다.
<b>와 <i>는 두꺼운 글씨와 이탤릭체를 정의하지만
<strong>과 <em>은 이 텍스트 자체가 중요하다는 의미를 내포하고 있다.
3. HTML <small> 요소
HTML <small>요소는 작은 텍스트를 보여준다.
<!DOCTYPE html>
<html>
<body>
<h2>HTML <small>Small</small> Formatting</h2>
</body>
</html>
4. HTML <mark> 요소
HTML <mark>요소는 마킹을 한(즉, 하이라이트 된) 텍스트를 정의한다.
<!DOCTYPE html>
<html>
<body>
<h2>HTML <mark>Marked</mark> Formatting</h2>
</body>
</html>
5. HTML <del> 요소
HTML <del>요소는 텍스트 가운데에 줄을 그음으로써 지워진 텍스트를 의미한다.
<!DOCTYPE html>
<html>
<body>
<p>The del element represents deleted (removed) text.</p>
<p>My favorite color is <del>blue</del> red.</p>
</body>
</html>
6. HTML <ins> 요소
HTML <ins>요소는 아래 밑줄을 그음으로써 삽입된 텍스트를 의미한다.
<!DOCTYPE html>
<html>
<body>
<p>The ins element represent inserted (added) text.</p>
<p>My favorite <ins>color</ins> is red.</p>
</body>
</html>
7. HTML <sub>와 <sup> 요소
HTML <sub>요소는 아래에 쓰는 텍스트를 의미하며
<sup>요소는 위에 쓰는 텍스트를 의미한다.
<!DOCTYPE html>
<html>
<body>
<p>This is <sub>subscripted</sub> text.</p>
<p>This is <sup>superscripted</sup> text.</p>
</body>
</html>
이 장에서는 style으로 지정하는 것이 아니면서
단순하게 텍스트의 서식을 바꿀 수 있는 tag 10개를 배웠다.
style이랑 다른 점은,
style의 경우에는 다른 tag안에 함께 언급되어서 따로 닫는 tag가 필요하지 않지만
텍스트 서식 설정 tag는 한 번 사용했다면 닫는 tag가 함께 수반되어야 한다.
그렇다고 style이 항상 편한 것은 아니다.
style은 정의된 요소 전체에 영향을 미치지만
구간으로 설정하는 서식 설정은 특정 구간에만 영향을 미친다.
다음 장에서는 인용 방법에 대해서 배우도록 하자.
'HTML & CSS' 카테고리의 다른 글
| [HTML] 11. HTML 코멘트 (0) | 2020.03.16 |
|---|---|
| [HTML] 10. HTML 인용과 인용구 (0) | 2020.03.12 |
| [HTML] 8. HTML 스타일 (0) | 2020.03.09 |
| [HTML] 7. HTML 문단 (0) | 2020.03.09 |
| [HTML] 6. HTML 제목 (0) | 2020.03.08 |