텍스트요소2

앞선 글에서는 단순히 p태그 같은 것으로 글자를 나열하는 것을 정리했습니다. 이번에는 조금 포매팅 요소에 대해 정리를 해보도록 하겠습니다. (MDN 문서를 정리한 것으로 MDN을 확인하면 보다 자세한 내용을 확인할 수 있습니다.)

나열 되어있는 문단 중에서 어떤 단어들이나 문장들은 다른 문장들과 다르게 특정 의미를 띄고 있는 경우가 있는데 기울림을 준다던가 굵게 해 중요도를 다르게 보이게 할 수 있습니다. 이런 경우 포매팅 요소를 사용해 조금 더 의미가 있음을 표현할 수 있습니다.

1. <b> vs <strong> 태그

※ b태그와 strong태그는 텍스트를 굵게 만들며 최종 내용물을 보면 똑같은 형태를 띄고 있습니다. 하지만 b태그와 strong태그는 중요도를 나타내는 부분에서 차이가 있습니다. 또한 스크린리더를 이용해 읽는 경우 strong태그의 경우 강조해서 읽습니다.

<p>
  Before proceeding,
  <strong>make sure you put on your safety goggles</strong>
</p>

 <p>저는 이 <b>고글</b> 을 추천합니다. 왜냐하면 이 <b>고글</b>을 착용하니, 안전하게 작업을 할 수 있었습니다.</p>

Before proceeding, make sure you put on your safety goggles

저는 이 고글 을 추천합니다. 왜냐하면 이 고글을 착용하니, 안전하게 작업을 할 수 있었습니다.

1-1 <b> : 굵게표시

<b> 요소는 독자의 주의를 요소의 콘텐츠로 끌기 위한 용도로 사용합니다. 그 외의 다른 특별한 중요도는 주어지지 않습니다. 원래는 "굵은 글씨 요소"로 불렸으며, 대부분의 브라우저도 여전히 텍스트를 굵은 글씨체로 강조합니다. 그러나 <b>를 사용해 텍스트를 꾸미면 안됩니다. 대신 CSS font-weight를 사용해 굵은 글씨체를 적용하거나, <strong> 요소를 사용해 특별히 중요한 텍스트를 나타내는 것을 권장합니다.

요약 키워드, 리뷰의 제품명 등, 특별한 중요성을 가지고 있지는 않지만 굵게 표시할 부분에 <b>를 사용할 수 있습니다.

1-2 <strong>: 높은 중요도 요소

<strong> 요소는 중대하거나 긴급한 콘텐츠를 나타냅니다. 보통 브라우저는 굵은 글씨로 표시합니다.

2. <i> vs <emg> 태그

<p>그가 <em>어떤 때에</em> 웃는지, 그리고 <em>왜</em> 웃는지 아무도 알지 못했다. </p>

<p>노래 가사에 사용된 <i>Uno, dos, tres, cuatro!</i>는 스페인어로 하나, 둘, 셋, 넷을 뜻합니다.</p>

그가 어떤 때에 웃는지, 그리고 왜 웃는지 아무도 알지 못했다.

노래 가사에 사용된 Uno, dos, tres, cuatro!는 스페인어로 하나, 둘, 셋, 넷을 뜻합니다.

2-1 <i> 태그

<i> 요소는 텍스트에서 어떤 이유로 주의와 구분해야 하는 부분을 나타냅니다. 기술 용어, 외국어 구절, 등장인물의 생각 등을 예시로 들 수 있습니다. 보통 기울임꼴로 표시합니다.

하지만, 윂페이지를 확인하다보면 이미지 요소 등을 i태그가 감싸고 있는 경우도 확인을 할 수 있습니다. 이러한 이유에 대한 설명은 아래 링크를 추가해놓도록 하겠습니다.

▶i태그를 사용하는 이유

2-2 <em>: 강세 요소

<em> 요소는 텍스트의 강세를 나타냅니다. <em> 요소를 중첩하면 더 큰 강세를 뜻하게 됩니다.

3.<mark> vs <small> 태그

3-1 <mark>

<mark> 요소는 현재 맥락에 관련이 깊거나 중요해 표시 또는 하이라이트한 부분을 나타냅니다.

인용문(<q>, <blockquote>)에서는, 원본엔 별도 표시가 없으나 특별히 봐야 하는 부분을, 그리고 원저자는 특별히 중요하다고는 생각하지 않았으나 주시해야 할 필요가 있는 부분을 표시합니다. 형광펜을 사용해 중요해 보이는 책에 강조 표시를 추가하는 것처럼 생각하면 됩니다.

3-2 <small>: 덧붙임 글 요소

<small> 요소는 덧붙이는 글이나, 저작권과 법률 표기 등의 작은 텍스트를 나타냅니다. 기본 상태에서 <small>은 자신의 콘텐츠를 한 사이즈 작은 글꼴(small에서 x-small 등)로 표시하지만, 스타일을 적용한 후에도 글씨 크기가 작을 필요는 없습니다.

4.<sub> vs <sup> 태그

4-1 <sub>: 아래 첨자 요소

<sub> 요소는 활자 배치를 아래 첨자로 해야 하는 인라인 텍스트를 지정합니다. 아래 첨자는 보통 더 작은 글씨 크기를 가지고, 기준선을 아래로 내려 렌더링 합니다.

4-2 <sup>: 위 첨자 요소

<sup> 요소는 활자 배치를 위 첨자로 해야 하는 인라인 텍스트를 지정합니다. 위 첨자는 보통 더 작은 글씨 크기를 가지고, 기준선을 위로 올려 렌더링 합니다.

5. <del> vs <ins> 태그

• del 태그와 ins태그는 사용하는 방법이나 공유하는 속성도 공일하게 공유합니다. 둘은 함께 다니기도 합니다.
• 사용 가능한 속성으로는 cite(변경점을 설명)와 datetime(변경된 일시를 표현)가 있습니다.

<p>“You're late!”</p>
<del>
    <p>“I apologize for the delay.”</p>
</del>
<ins cite="../howtobeawizard.html" datetime="2018-05">
    <p>“A wizard is never late …”</p>
</ins>

“You're late!”

“I apologize for the delay.”

“A wizard is never late …”

5-1 <del>

<del> 요소는 문서에서 제거된 텍스트의 범위를 나타냅니다. 문서나 소스 코드의 변경점 추적 등에 사용할 수 있습니다. <ins> 요소를 추가된 텍스트의 범위를 나타낼 수 있습니다.

5-2 <ins>

<ins> 요소는 문서에 추가된 텍스트의 범위를 나타냅니다. <del> 요소를 사용하면 삭제된 텍스트의 범위를 나타낼 수 있습니다.

6. <code> , <kbd> 태그

6-1 <code>: 인라인 코드 요소

<code> 요소는 짧은 코드 조각을 나타내는 스타일을 사용해 자신의 콘텐츠를 표시합니다. 기본 스타일은 사용자 에이전트의 고정폭 글씨체입니다. <pre>태그와 비슷하지만 <pre> 태그는 블록요소고 <code>는 인라인 요소라는 점에서 다릅니다. 따라서 문장의 중간에 짧게 표시를 하고 싶을 때 <code>태그를 쓰면 좋습니다. 여러줄을 나타내는 경우 pre로 감싼다음 사용하는 것을 추천합니다.

6-2 <kbd>: 키보드 입력 요소

<kbd> 요소는 키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력을 나타냅니다. 관례에 따라 사용자 에이전트의 고정폭 글꼴로 표시하지만, HTML 표준은 그런 점을 강제하지 않습니다.