HTML 강조, 인용, 밑줄 태그

 

태그를 통하여 중요도를 나타낼 수 있고, 요소를 강조를 할 수 있다.

강조와 인용을 나타내는 데 사용되는 태그들에는 <em>, <strong>, <b> 등이 있다.

본격적으로 이 태그들에 알아보기전에 가장 먼저,

주의할 점은 꾸미는 용도로 쓰이는 것은 CSS로 이루어져야 한다는 것이다.

 

 

1. 중요도 태그 <Strong> </Strong>

HTML에서 텍스트를 더 강조하는 데 사용된다.

이 태그는 해당 텍스트를 시작적으로 굵은 글꼴로 표시하여 강조하는 역할을 한다.

주로 중요한 내용이나 강조해야 할 부분을 나타내는 데 사용된다.

 

<strong> 태그는 시각적인 강조를 위한 것이므로, 

보통 브라우저에 따라 굵은 글꼴로 표시된다.

그러나 이는 단순히 굵은 글꼴로만 표시되는 것이 아니라, 

해당 텍스트가 중요하거나 강조되어야 함을 의미한다.

이는 검색 엔지에게 해당 텍스트의 중요성을 알리는 데 사용된다.

 

 

입력 방법 : strong {내용} tab 키를 입력하면 { }안의 내용이 자동으로 strong 태그가 되어 중요도를 나타낸다.

<p>
    <strong>경고!</strong> 이것은 매우 위험합니다. 
    <!-- strong {경고!} tab키 -->
  </p>

 

 

2. 강조 태그 <em> </em>

HTML에서 텍스트를 강조하는 데 사용된다.

해당 텍스트를 이탤릭체로 표시하여 강조하는 역할을 하며,

주로 강조되어야 하는 부분이나 문장의 감정, 의미적인 중요성을 나타내는 데 사용된다.

 

<em> 태그는 시각적으로 이탤릭체로 표시되며, 보통 브라우저에 따라 기울임꼴로 표시된다.

그러나 이는 단순히 이탤릭체로 표시되는 것이 아니라, 

앞선 <strong> 태그와 마찬가지

해당 텍스트가 강조되거나 감정이나 의미적인 중요성을 가진다는 것을 나타낸다.

 

입력 방법 : em {내용} tab 키를 입력하면 { }안의 내용이 자동으로 em태그가 되어 강조를 나타낸다.

<p>
    나는 <em>당근</em>을 사랑합니다. <br>
    나는 당근을 <em>사랑</em>합니다.
  </p>

 

 

3. 첨자 태그

첨자 태그는 텍스트에서 일부를 작게 표시하거나, 아래첨자(하위 스크립트) 또는 윗첨자(상위 스크립트)로 표시하는 데 사용된다. 이는 특정 텍스트의 부가적인 정보를 나타내거나, 수학적인 표현을 할 때 유용하게 사용될 수 있다.

(1) 윗 첨자 

  : 해당 텍스트를 위쪽으로 올려 크게 표시한다.

주로 화학식, 수학식, 일반 텍스트에서 지수로 표시되어야 할 경우 사용된다.

예를 들어 "x²"에서 숫자 2는 윗첨자로 표시될 수 있다.

 

(2) 아래 첨자 

: 해당 텍스트를 아래쪽으로 내린 작은 텍스트로 표시된다.

주로 화학식, 각주, 수학식 등에 사용된다.

예를 들어 "H₂O"에서 숫자 2는 아래첨자로 표시될 수 있다

 

!주의!

첨자의 용도로만 쓰여야지 CSS용도로 쓰이면 안됨

<p>
    X<sup>3</sup>
  </p>
  <p>
    H<sub>2</sub>O
  </p>

 

 

4. 밑줄 태그 <u> </u>

예전에는 밑줄을 긋는 용도로 사용되었으나 현재는 CSS효과와 함께 철자 오류 등을 강조하는 용도로 사용된다.

 

HTML5부터는 CSS를 사용하여 텍스트에 밑줄을 추가하는 것이 권장된다.

이는 시맨틱 웹의 관점에서 더 나은 방법이며,

스타일링을 더 유연하게 제어할 수 있다는 장점이 있다.

 

5. 취소선 태그 <s> </s>

더 이상 유효하지 않는 정보를 취소선과 함께 나타낸다. (글자 가운데 가로선 표시)

 

이 태그 또한 HTML5부터는 권장되지 않는 방법으로,

대신 CSS를 사용하여 텍스트에 취소선을 추가하는 것을 권장한다.

<p>
    <u>u태그</u>입니다.
  </p>
  <p>
    <s>s태그</s>입니다.
  </p>

 

 

 

 

 

이상으로 중요도 태그/인용 태그/첨자 태그/밑줄 태그에 대해 알아보았따~~~~~~~