[HTML] 기본 꾸미기 태그 (b, strong, i, em, mark, u, s, del, small, big)

앞으로 태그에 대해서 면밀하게 볼 텐데 텍스트를 꾸미고 강조하는 수식 태그에 대해서 간단하게 먼저 보려고 합니다. 사실 꾸미는 역할은 태그에서 CSS로 많이 넘어가고 있기 때문에 없어지는 태그들도 많고 존재하더라도 좀처럼 잘 쓰지 않는 것으로 알고 있기는 합니다. 하지만 태그를 통해서 실제로 웹에서 어떻게 구현이 되는지 그 시발점에서 한번 보는 것은 나쁘지 않다는 생각에 소개를 합니다. 

 

전체적으로 소개하고자 하는 태그에 대해서 나열해보았습니다. 10번째 줄의 middle은 <small> 태그와 <big> 태그와 글자크기를 비교할 수 있도록 넣어보았습니다. 

 

 

굵게 (<b> 태그, <strong> 태그)

일반적으로 bold체라고 부르기도 하는 '굵게'에 대한 태그입니다. 위에서 보면 <b> 태그와 <strong> 태그는 화면의 결과로는 동일하게 보입니다. <b> 태그는 bold의 약자인 'b'를 쓰는 만큼 딱 글자를 '굵게'하는 역할입니다. 하지만 <strong> 태그는 단순히 굵게만 하지는 않습니다. 저도 정확한 알고리즘은 정확히 글자를 굵게 함과 동시에 내적으로 중요도를 부여해줍니다. 아마 여기서의 중요도는 <b> 태그보다 웹브라우저와의 상호작용에 더 큰 기여를 하도록 하지 않을까 싶습니다. 

 

 

흘림체 (<i> 태그, <em> 태그)

흘림체보다는 이태리체라고 많이들 부르기는 합니다. 그래서 'italic'의 약자인 'i'를 따와서 <i> 태그를 통해서 흘림체를 구현할 수 있습니다. <em> 태그도 똑같이 흘림체로 보이는데 <i> 태그와 <em> 태그의 관계는 앞에 <b> 태그와 <strong> 태그의 관계와 같다고 볼 수 있습니다. 즉 <em> 태그가 <i> 태그와는 다르게 내적으로 강조의 의미를 더 주고 있다는 것입니다. 

 

 

강조 (<strong> 태그, <em> 태그, <mark> 태그) 

그러면 외적인 디자인과 상관없이 강조의 역할을 담는 태그는 <strong> 태그, <em> 태그에 더해 <mark> 태그까지 알아두시면 좋을 것 같습니다. <strong> 태그는 굵게 보이고 <em> 태그는 흘림체로 보이고 <mark> 태그는 노란색 형광펜이 칠해져 있습니다. 강조하고 싶을 때 원하는 디자인에 맞게 골라 쓸 수 있을 것 같습니다.

 

 

밑줄 (<u> 태그)

밑줄은 underline의 'u'를 따온 <u> 태그입니다. 앞에서도 마찬가지였지만 태그 중에 약어를 통해 만든 것들이 많습니다. 때문에 어떤 단어에서 형성된 태그인지를 보는 것이 태그의 역할을 이해하고 익히는 데 좋을 듯 합니다,

 

 

중간선 (<s> 태그, <del> 태그)

<s> 태그와 <del> 태그, 저는 각각 취소선과 삭선으로 받아들였는데 그게 그거 아닌가 싶기는 합니다. 확실한 건 <del> 태그는 삭제의 의미를 갖고 있기 때문에 중간선을 긋고 싶은데 삭제 느낌은 아닐 때 <s> 태그를 사용하면 될 것 같습니다. 

 

 

글자 크기 (<small> 태그, <big> 태그)

그대로 글자 크기를 '작게' 또는 '크게'하는 역할입니다. 근데 HTML 5부터는 <big> 태그는 지원되지 않는다고 합니다. 글자 크기와 관련된 <font> 태그 또한 HTML 5부터는 지원되지 않는다고 합니다. 앞에서 내적으로 중요도를 넣어주는 강조 태그들도 있었는데, 그런 게 아니라 디자인 역할만 하는 태그는 CSS로 대체되면서 사라지는 것 같습니다.