티스토리 뷰

HTML

[HTML] <sub>

<sub>

<sub> 태그는 텍스트의 아래첨자를 사용할 때 쓰입니다. 주로 수학적인 공식이나 화학식에서 많이 사용하게 됩니다. <sub> 태그는 디자인적인 요소를 사용하는 것은 적합하지 않습니다. <sub> 태그의 위치는 변경이 필요한 경우에는 vertical-align 속성을 사용하면 변경할 수 있으며, 이런 모양이나 위치는 브라우저마다 틀릴 수 있으니 확인이 필요합니다.


<sub>

<sub> 태그는 텍스트 아래첨자를 정의합니다.

정의(Definition)

  • <sub> 태그는 텍스트 아래첨자(Subscript)를 정의합니다.
  • <sub> 태그는 문자의 절반 아래로 위치하고, 작은 글씨로 표현됩니다.
  • <sub> 태그는 수학 공식이나 화학 공식에 많이 사용됩니다.

비교(Compare)

  • 글씨를 특별한 이유로 평범한 글자와 구분하기 위해서는 <i> 태그를 사용합니다.
  • 글씨를 중요성과 관련성을 전달하지 않고, 다른 텍스트와 구별 할 때 <b> 태그를 사용합니다.
  • 글씨를 강조하고 싶다면 <em> 태그를 사용합니다.
  • 글씨의 중요성을 강조하고 싶다면 <strong> 태그를 사용합니다.
  • 글씨의 중요성과 강조를 고려하지 않는 단순 참고용 표시를 사용한다면 <mark> 태그를 사용합니다.
  • 글씨의 전문적인 용어를 정의할 때는 <dfn> 태그를 사용합니다.
  • 글씨를 위첨자로 표현하고 싶다면 <sup> 태그를 사용합니다.
  • 글씨를 아래첨자로 표현하고 싶다면 <sub> 태그를 사용합니다.
  • 글씨의 맞춤법이 틀린 단어를 표현하고 싶다면 <u> 태그를 사용합니다
  • 글씨의 저작권 및 법적 텍스트 표현은 <small> 태그를 사용합니다.

Sample1

결과
  • 글씨를 특별한 이유로 평범한 글자와 구분하기 위해서는 <i> 태그를 사용합니다.
  • 글씨를 중요성과 관련성을 전달하지 않고, 다른 텍스트와 구별 할 때 <b> 태그를 사용합니다.
  • 글씨를 강조하고 싶다면 <em> 태그를 사용합니다.
  • 글씨의 중요성을 강조하고 싶다면 <strong> 태그를 사용합니다.
  • 글씨의 중요성과 강조를 고려하지 않는 단순 참고용 표시를 사용한다면 <mark> 태그를 사용합니다.
  • 글씨의 전문적인 용어를 정의할 때는 <dfn> 태그를 사용합니다.
  • 글씨를 위첨자로 표현하고 싶다면 <sup> 태그를 사용합니다.
  • 글씨를 아래첨자로 표현하고 싶다면 <sub> 태그를 사용합니다.
  • 글씨의 맞춤법이 틀린 단어를 표현하고 싶다면 <u> 태그를 사용합니다
  • 글씨의 저작권 및 법적인 텍스트 표현은 <small> 태그를 사용합니다.
html
<ul>
    <li>글씨를 특별한 이유로 평범한 글자와 구분하기 위해서는 <i>i</i> 태그를 사용합니다.</li>
    <li>글씨를 중요성과 관련성을 전달하지 않고, 다른 텍스트와 구별 할 때 <b>b</b> 태그를 사용합니다.</li>
    <li>글씨를 강조하고 싶다면 <em>em</em> 태그를 사용합니다.</li>
    <li>글씨의 중요성을 강조하고 싶다면 <strong>strong</strong> 태그를 사용합니다.</li>
    <li>글씨의 중요성과 강조를 고려하지 않는 단순 참고용 표시를 사용한다면 <mark>mark</mark> 태그를 사용합니다.</li>
    <li>글씨의 전문적인 용어를 정의할 때는 <dfn>dfn</dfn> 태그를 사용합니다.</li>
    <li>글씨를 위첨자로 표현하고 싶다면 <sup>sup</sup> 태그를 사용합니다.</li>
    <li>글씨를 아래첨자로 표현하고 싶다면 <sub>sub</sub> 태그를 사용합니다.</li>
    <li>글씨의 맞춤법이 틀린 단어를 표현하고 싶다면 <u>u</u> 태그를 사용합니다</li>
    <li>글씨의 저작권 및 법적인 텍스트 표현은 <small>small</small> 태그를 사용합니다.</li>
</ul>

Sample2

수학 공식 및 화학 공식과 관련된 예제입니다.

결과

플루오린화산화악티늄이 녹는 결과만 얻을 수 있다.

AcF3 + 2NH3 + H2O → AcOF + 2NH4F

html
<p>플루오린화산화악티늄이 녹는 결과만 얻을 수 있다.</p>
<p>AcF<sub>3</sub> + 2NH<sub>3</sub> + H<sub>2</sub>O → AcOF + 2NH<sub>4</sub>F</p>

Sample3

일반적으로 <sub> 태그는 각주 표시에도 사용됩니다.

결과

각주 : 본문의 어떤 부분의 뜻을 보충하기위해 아래쪽1에 따로 단 것을 의미합니다.

html
<p>각주 : 본문의 어떤 부분의 뜻을 보충하기위해 아래쪽<sub>1</sub>에 따로 단 것을 의미합니다.</p>

Sample4

수학 공식과 변수를 사용하는 예제입니다.

결과

x1의 좌표와 x2의 좌표 값을 더한 후 x3을 추가합니다.

html
<p><var>x<sub>1</sub></var>의 좌표와 <var>x<sub>2</sub></var>의 좌표 값을 더한 후 <var>x<sub>3</sub></var>을 추가합니다.</p>

호환성(Compatibility) 더보기 caniuse.com

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
<sub> 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능

참고(Reference)

  • MDN
  • HTML5

공유하기(Share) 더보기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기

공감하기(Like) 더보기

UP NEXT : Ads by Google

질문하기(Questions)
댓글쓰기 폼