텍스트 레벨 요소

텍스트 레벨 시멘틱 요소에 대해 알아보자!

<sub>

• <sub> : 아래 첨자 (Subscript Text)

예시

<dfn> H<sub>2</sub>SO<sub>4</sub> </dfn>

결과

위 첨자, 아래 첨자 참고 이미지

위 첨자, 아래 첨자 이해를 돕기 위한 이미지

<dfn>

• <dfn> : definition 정의 요소

• 인라인 요소이다.

예시

<p>The <strong>HTML Definition element</strong>
(<strong><dfn id="definition-dfn">&lt;dfn&gt;</dfn></strong>) is
used to indicate the term being defined within the context of a
definition phrase or sentence.</p>

<p>Because of all of that, we decided to use the
<code><a href="#definition-dfn">&lt;dfn&gt;</a></code> element for
this project.</p>

결과

아래 <dfn>을 클릭하면 상단에 <dfn>으로 이동한다.

앵커 요소의 id 값을 활용해서 이동하는 방법은 이곳을 참조.

<sup>

<sup> : 윗첨자 (Super script text)

• 윗 첨자와 아래 첨자를 구분하기 위해 <div>요소를 사용해 준다.

<sup><a href="#footnote-1">[1]</a></sup>

<mark>

<mark> : 관련 참조 목적의 하이라이트된 글자 요소

사용 예시

사용자가 단를 검색 했을 때 검색 결과에서 검색한 단어 하이라이트하고 싶을 때 사용한다.

<mark>인용</mark>

<time>

<time> : 기계가 이해할 수 있는 형태로 날짜나 시간을 나타내는 요소

예제

<time datetime="2017-08-14T10:18">2017.08.14 10:18</time>

<!-- 출처가 있으니 <cite> 요소를 사용해 주는 것이 좋다. -->
<cite><time datetime="2017-08-14T10:18">2017.08.14 10:18</time> 
by sortie</cite>

<abbr>

• 축약 요소이다. 준말 또는 머리글자를 나타낸다. title 속성을 사용하면 준말의 전체 뜻이나 설명을 사용자에게 제공해 줄 수 있다.

• title 속성은 준말에 대한 전체 설명만을 가져야 하며 다른 것은 포함 할 수 없다.

예제

<abbr title="맥도날드">맥날</abbr>

결과

"맥날"에 마우스 포인트를 올리면 "맥도날드"라는 툴팁(tooltop)이

<s>

<s> : 더 이상 관련이 없거나 더 이상 정확하지 않은 요소

예제

<s>11,900원</s> <em>50%</em> 5,900원

결과