본문 바로가기
프로그래밍/HTML5 태그 를 뛰어넘어라

(HTML/HTML5) 2.서식태그 글자 크기 <sub><sup>태그 10~11/39

by it-수다쟁이증후군 2019. 4. 9.
직전 포스트 복습
  1. 글자 가운데 줄긋기 3개 - del태그 s태그 strike태그
  2. 글자 밑줄 4개 - ins태그 abbr태그 acronym태그 u태그
  3. del태그는 ins 태그와 짝지어 사용
  4. strike태그 와 acronym태그 이제 그만!
  5. 글자 줄긋기 태그 7개는 5개로 줄어든다.
  6. del태그 s태그 ins태그 abbr태그 u태그

이전의 강의를 간략하게 줄이면 위와 같다. 서식태그 글자 크기 태그에 대해서 알아보자.

html5 태그완전정복 sub sup


글자-크기 태그는 서식태그39중에 4개가 있다. 아래 그림을 보면 간단히 알 수 있다.



1-1.html - <sub> 태그 정리


의미/역활 :글자 크기를 작게해서 보통 화학공식이나 수식에 사용된다.
사용법 :<sub> 와 </sub> 사이에 넣어 주기만 하면 된다.

html5 서식태그 sub 예제



2-1.html - <sup> 태그 정리


의미/역활 :글자 크기를 크게 해서 화학공식,수식에 쓰이고 보통의 문서에서는 각주나 미주의 용도로 사용한다.
사용법 <sup> 와 </sup> 사이에 넣어 주기만 하면 된다.

html5 서식태그 sup 예제



2-2.html - <sub> 와 <sup> 태그 한 걸음 더


sub 태그와 sup태그가 글자만 작아진 것이 아니라 배치시키는 곳이 다르다. sub 태그는 작게 해서 아래쪽에 배치하고, sup 태그는 글자를 작게 해서 위쪽에 배치하는 것이다. 단 기준점이 다르다. 아래 그림을 보면 알 수 있듯이 sub태그는 기존 글자의 하단 밑으로 sup 태그는 기존 글자 상단 위로 올린다.

html5 서식태그 sub sup 위치



3-1.html - <big> 와 <small> 태그 정리


의미/역활 :글자 크기를 작게 또는 크게 해서 내용을 강조한다.
사용법 :<big> 와 </big> 또는 <small> 와 </small> 사이에 넣어 주기만 하면 된다.



3-2.html - <big> 와 <small> 태그 한 걸음 더

html5의 개정 방향이 시멘틱을 강화하는 방향으로 진행되는데 단순히 글자 크기를 조정하기만 하는 big태그와 small태그는 점점 사라지는 추세이다. 그리고 실제로 big태그는 html5에서 권장하지 않는다.



4.html <sub> <sup> 태그 최종정리

  1. 글자 크기 관련 서식 태그는 sub, sup 태그가 있다.
  2. hn 태그도 사실상 글자크기 태그 에 포함된다.
  3. sub 태그는 아래첨자이며 화학공식이나 수식에 주로 사용된다.
  4. sup 태그는 위첨자이며 화학공식, 수식뿐만 아니라 일반 문서에서 각주로 사용된다.
  5. big태그와 small태그는 사라지는 추세이다.
  6. 글자크기 태그는 sub태그 sup태그 2개만 남았다.

다음에는 서식태그 - 글자서체-1.italic체 와 관련된 태그에 대해서 알아보자.

댓글