2011. 5. 12. 01:38ㆍIT/Tistory Tips
글을 쓸 때 글자를 강조하기 위해 굵게 표시하거나 색을 넣을 때가 있다. 수정 사항을 표시하려고 가운데 줄을 긋기도 하고 글자를 기울여 쓰기도 한다. 그런데 이런 상황에서 쓸 수 있는 태그가 여러 개다. 어떤 차이가 있는 걸까?
1. 글자 강조하기
특정 문구를 강조할 때 글자를 굵게 표현한다. 글자를 굵게 표현하는 방식은 여러 가지다. 첫 번째로 생각할 것은 글의 구성에 어떤 영향을 미치는 요소인가다. 제목(headings)을 표현하는 h1 ~ h6 태그가 있다. h1 ~ h6은 글자를 굵게 표현함과 동시에 User Agent CSS 설정에 따라 글자 크기나 스타일을 바꾸기도 한다. 그러나 이 요소는 글의 구조를 구성하는 요소지 단순히 글자를 굵게 표현할 때 사용하는 요소는 아니다. 또 block 속성을 지니므로 글 중간에 삽입할 수 없다.1각주 1display:inline 스타일을 부여해서 글 중간에 삽입할 수 있지만, 의미가 이상해지며 HTML 문서의 구조 또한 이상해진다. 제목(소제목 포함)을 표시할 때 글자 크기를 지정한다거나 굵게 스타일을 지정하는 것보다. h1~h6 요소를 사용하는 것이 바르다. 위의 [1. 글자 강조하기]가 글의 소제목으로, h3 요소를 사용한 부분이다.
두 번째로 생각해 볼 것은 단순히 굵게만 표시할 것인가 중요도를 부여할 것인가다. 글자를 굵게 표현하는 이유가 뭘까? 눈에 잘 띄게 하기 위함이다. 그럼 왜 눈에 잘 띄어야 할까? 그 내용이 중요하다고 생각하기 때문이다. 그럼 중요한 문자를 표현하는 요소는 뭘까? strong이다. strong 요소를 사용하면 <strong></strong> 사이의 내용이 굵게 표시된다. 시각적으로 굵게 표시되었을 뿐이지만, HTML 문서 소스를 보면 그 부분이 중요하다는 것을 파악할 수 있다. strong 요소에 color:red 등의 스타일 등을 사용하면 다른 색으로 표현되므로 시각적으로 더 눈에 띄게 할 수 있다.
마지막은 흔히 사용하는 b 요소와 font-weight: bold 스타일이다. b 요소와 font-weight: bold(또는 700)은 둘 다 글자를 굵게 표현하는 것이다. 그뿐이다. 문서 자체에서 봤을 땐 굵게 표시되므로 중요해 보일 수 있지만, HTML 문서 소스에선 중요성이 드러나지 않는다.
만약 굵게 표현할 내용이 글의 제목 또는 소제목이라면 h1~h6 요소를 사용하는 것이 맞다. 또 그 내용이 중요하다고 생각되면 strong, 굵은 글씨로 표현하되 글 흐름을 보면 그리 중요한 내용이 아닐 땐 b 요소를 사용하는 것이 좋다. strong 요소를 사용하면 검색 엔진에서도 중요성을 파악할 수 있다는 장점이 있다.
<h3>h3 요소 - 소제목 표시</h3><strong>strong 요소 - 해당 내용을 강조</strong><b>b 요소 - 글자를 굵게 표현</b> <span style="font=weight:700">span style="font-weight:bold" - 글자를 굵게 표현</span> |
2. 글자 가운데 줄 표시하기
웹 문서를 보면 글자 가운데 줄이 쫙 그어진 것을 볼 수 있다. 보통 해당 내용이 지금 상황과 맞지 않거나 잘못된 내용이라고 확인됐을 때 사용한다. 물론 간혹 강조의 의미로 표현하는 때도 있지만, 일반적이진 않다. 오프라인상에서 글을 교정할 때를 생각하면 된다. 글에서 틀린 내용이 있으면 줄을 쫙 긋고 뒤에 올바른 내용을 삽입한다. 온라인에서 이 기능을 하는 것이 바로 del 요소다. del 요소는 해당 내용이 삭제되었다는 것을 표시한다. 시각적으론 글자 중간에 줄이 쫙 그어진 모습이다. del 요소로 삭제할 부분을 지정하고 삽입(insert) 기능을 하는 ins 요소로 추가할 부분을 삽입하는 것이 글 교정의 올바른 태그 사용이다.
del 요소와 시각적으로 완전히 같은 기능을 하는 요소가 s와 strike다. s와 strike는 모두 취소선을 의미하는 strike-out에서 유래되었다. 그러나 Deprecated 상태이며 취소선의 의미로 사용할 때 del 요소를 사용할 것을 권장한다.
이 역시 스타일로 구현할 수 있다. CSS나 인라인 스타일에 text-decoration: line-through를 추가하면 글자 가운데 취소선이 생긴다. 글자 가운데 줄 표시 역시 해당 내용을 삭제 또는 취소하려는 의미라면 del 요소를, 단순히 글 가운데 줄을 긋고 싶다면 text-decoration: line-through 스타일을 사용하는 것이 좋다.
| <del> <strike> <span style="text-decoration:line-through">span style="text-decoration:line-through" - 글자 가운데 줄 표시</span> |
3. 글자 기울여 쓰기
마지막으로 글자 기울여 쓰기를 살펴보자. 기울인 글자를 볼 때 가장 먼저 생각나는 것은 italic이라는 단어다. 흔히 오른쪽으로 약간 기운 글자를 이탤릭체라고 부른다. 이탤릭체는 글자가 기운 것을 의미하지만, 굵은 글씨와 마찬가지로 강조의 의미를 표시할 때도 사용한다.
italic에서 유추할 수 있는 것이 바로 i 요소다. i 요소는 글자를 이탤릭체로 표시한다. 글자를 굵게 표시할 때의 b 요소와 비슷한 의미다. 단순히 글자체를 bold 체, italic 체로 바꾸는 것이다.
반면, em 요소는 그 의미부터가 다르다. em은 emphasize라는 단어에서 왔다. em 요소는 그 의미 자체가 강조인 셈이다. strong 요소처럼 em 요소로 표현된 부분은 이탤릭체이면서 강조의 의미를 동시에 가진다. 물론 시각적으로 em과 i 요소를 구분할 순 없다. 그러나 HTML 문서 소스에서 확인할 수 있으며 검색 엔진이나 기타 비 시각적인 상황에서 강조의 의미를 나타낼 수 있다.
i 요소와 완전히 같은 것이 font-style: italic 스타일이다. font-style: italic 역시 글자를 이탤릭체로 표시한다.
글자 기울여 쓰기 역시 강조의 의미가 포함된 것이라면 em을 쓰는 것이 맞고, 강조의 의미가 없는 단순한 이탤릭체 표현이라면 i 요소나 font-style: italic 스타일을 적용하는 것이 맞다.
| <em>em 요소 - 이탤릭체 표현 및 내용 강조</em> <i>i 요소 - 이탤릭체로 글자 표현</i> <span style="font-style:italic">span style="font-style:italic" - 이탤릭체로 글자 표현</span> |
- display:inline 스타일을 부여해서 글 중간에 삽입할 수 있지만, 의미가 이상해지며 HTML 문서의 구조 또한 이상해진다. - [본문으로]