HTML 글자를 꾸며주는 태그들에대해 알아보자

글자를 꾸며주는 태그란?

• 글자에 특별한 효과를 주는 기능을 하는 태그로 어떠한 내용을 강조하고 싶을때 많이 사용한다. 해당 태그들은 아래와 같다. 

 

<strong> 태그

• <strong> 태그는 글자를 굵은 텍스트로 출력해준다.

    <p><strong>important</strong></p>
    <p>important</p>

결과

 

사전지식으로 <p> 태그는 태그 안에있는 내용을 출력해주는 간단한 태그이다. <strong> 태그의 기능을 확인하기 위해 썼을때와 안썼을때의 결과값을 가져와봤다. 글씨가 굵어진것이 눈에 보일것이다. <strong>은 글자를 굵은 텍스트로 표시해주는 역활을 하기 떄문에 주로 강조하고 싶은 내용에 많이 사용하는 태그이다. 그렇다면 <p>태그와 <strong> 태그의 위치를 바꿔준다면 어떻게 될까.

 

<p><strong>important</strong></p>
<strong><p>important</p></strong>

결과

 

놀랍게도 차이가 없다. <strong> 태그는 시작태그와 종료태그 사이에 있는것을 강조시켜주기 때문에 시작태그와 종료태그 사이에만 내가 강조하고자 하는 내용이 들어가 있으면 된다.

 

 

 

<b> 태그

• <b>태그는 <strong> 태그와 거의 비슷한 기능을 가지고 있다. 

<p><b>itowayup</b></p>
<p>itowayup</p>

결과

결과를 보면 알겠지만 <b> 태그는 <strong> 태그와 동일한 기능을 한다. 그렇다면 둘을 비교해서 봐보도록 하자.

 <p><b>itowayup</b></p>
 <p><strong>itowayup</strong></p>

결과

두 코드 모두 글씨를 굵게 만들어주는 것을 볼 수 있다. 효율적인 사고방식을 가진 사람이라면 같은기능을 하는 태그를 왜 만들어놨지? 하는 궁금증이 생길것이다. 이 둘의 차이점은 시각적으로가 아닌 기능적으로 차이가 있다. <strong> 태그는 웹페이지한테도 그 중요성을 알려준다. 즉 다시 말해 <b> 태그는 그저 단순하게 글자만 굵게 출력해주는 반면 <strong> 태그는 그와 동시에 브라우저한테 중요도를 알려 웹페이지의 접근성을 올려준다.

 

 

 

<i>태그 

• <i> 태그는 글자를 기울여준다.

<p> i tag </p>
<p><i> i tag </i></p>

결과

<i> 태그는 italic 의 약자로 위 사진과 같이 글자를 기울여주는 기능을 가지고 있어 무언가를 강조하거나 다른 어조를 말할때(인용표현 등) 많이 사용되는 태그이다. 

 

 

<em> 태그

• <em> 태그는 <i> 태그와 비슷한 기능을 한다.

<p> em tag </p>
<p><em> em tag </em></p>

결과

 

<em> 태그는 emphasized 의 약자로 강조하다라는 뜻을 가지고 있다. 사용처는 <i> 태그와 비슷하다. 그럼 <i> 태그와는 무슨 차이점이 있을까. 먼저 시각적인 차이점을 확인해보자.

 

<p><i> itowayup </i></p>
<p><em> itowayup </em></p>

결과

그렇다 시각적 차이는 거의 없다. 이 둘의 차이점은 <b> 와 <strong> 의 차이점과 비슷하다. <b> 는 기울임만 나타내어주고 <em> 태그는 그와 동시에 브라우저에게 강조해주는 역활을 한다. 그럼 브라우저한테 강조하면 무엇이 달라지는지 궁금할 것이다. 예를 들어 책을 읽어주는 프로그램이 있다. 해당 프로그램은 웹페이지에 있는 글을 읽어주는 프로그램인데 만일 <b> 태그를 사용하여 강조해주면 시각적으로 볼때는 이부분이 강조되었다를 알 수 있지만 기계적인 목소리로 똑같이 읽어주는 프로그램한테서는 강조된 부분을 알 수 없다. 하지만 <strong> 태그를 사용하여 강조해주면 프로그램이 이 부분이 강조되었음을 인지하고 목소리에 변화를 주어 어느 부분이 강조되었는지 알려줄 수 있다. 이러한 차이점이 있으니 참고하기 바란다. 

 

 

<u> 태그

• <u> 태그는 밑줄을 생성해준다.

<p> u tag </p>
<p><u> u tag </u></p>

결과

u 태그를 사용하면 글자에 밑줄을 출력해준다. 따라서 이는 어떤 부분을 강조하고 싶을때 많이 사용되는 태그이다.

 

 

<small> 태그

• <small> 태그는 글자 크기를 작게 만들어 준다.

<p> small tag </p>
<p><small> small tag </small></p>

결과

<small> 태그의 기능은 상당히 직관적이다. 말그대로 글자를 small하게 만들어 주는 기능을 가지고 있다. 

 

 

 

<del> 태그

• <del> 태그는 글자 가운데 줄을 출력해준다.

<p> del tag </p>
<p><del> del tag </del></p>

결과

<del> 태그는 delete 의 약자로 글자 가운데 줄을 출력해주는 기능을 한다. 

 

 

 

<mark> 태그

• <mark> 태그는 글자에 형광팬을 칠한듯한 효과를 주는 기능을 한다.

<p> mark tag </p>
<p><mark> mark tag </mark></p>

결과

<mark> 태그는 텍스트를 하이라이트 해주는 기능을 가지고 있다. 중요한 부분을 마킹 한다는 표현이 있듯이 개발자가 중요한 부분을 강조하고 싶을때 많이 사용하는 태그이다.