​​ #12 font 태그 알아보기

#12 font 태그 알아보기

 

문서내에서 글자의 크기, 색상 및 글꼴종류를 지정할 수 있는 태그로서 사이즈는 1부터 7까지 있는데 1이 가장 작은 사이즈입니다.

기본 폰트값은 3으로 지정되어 있으며, px이나 pt단위로의 변경이 가능합니다. 

 

pixel (px) : 고정된 크기 단위. (주로 컴퓨터 화면에서 사용됨)
1px은 컴퓨터 화면에서 점 1개와 같음.
크기 조정이 안 됨

 

point(pt) : 고정된 크기 단위. (주로 인쇄 매체에서 사용됨)
크기 조정이 안 됨

 

em : 웹 문서에서 사용되는 단위로, 컴퓨터 외 모바일 등 다른 장치에서도
 크기 조정이 가능함. 1em은 12pt, 16px, 100%와 같음.

percent(%) :  em과 비슷하게 pc와 모바일, 태블릿 등 서로 다른 장치에서 상대적으로 크기 조절이 가능함

 

 

xx-small = 9px = 0.5625em
x-small =  10px = 0.625em
small = 13px = 0.812em
medium = 16px =12pt = 1em
large = 18px = 1.125em
x-large =24px = 1.5em
xx-large = 32px = 2em
smaller : 상위 요소에 비해 상대적으로 더 작은 크기

 

 

폰트의 단위에 따른 사이즈 대비표

 

폰트 사이즈비교표

 

 

예))

<font size="5" color="green">
폰트속성의 적용모습입니다.
</font>

 

출력물))

폰트속성의 적용모습입니다.

 

 

예))

<font size="4" color="#5CD1E5">
색상코드를 이용한 경우인데, 우측 링크메뉴를 클릭해서 네이버 색상표를 이용할 수도 있습니다.
</font>

 

출력물))

색상코드를 이용한 경우인데, 우측 링크메뉴를 클릭해서 네이버 색상표를 이용할 수도 있습니다.

 

 

예))

<font size="-2" color="red">
기본폰트사이즈는 3이므로 -2를 하면 폰트사이즈는 1이 됩니다.
</font>

 

출력물))

기본폰트사이즈는 3이므로 -2를 하면 폰트사이즈는 1이 됩니다.

 

 

예))

<font size="+4" color="red">
기본폰트사이즈는 3이므로 +4를 하면 최대크기인 7이 됩니다.
</font>

 

출력물))

기본폰트사이즈는 3이므로 +4를 하면 최대크기인 7이 됩니다. 

 

 

예))

<font size="1" color="blue">
가장작은 단위의 폰트사이즈입니다
</font>

 

출력물))

가장작은 단위의 폰트사이즈입니다

 

 

'HTML > HTML 기초' 카테고리의 다른 글

#14 위치정렬 태그 배우기  (0) 2018.08.03
#13 div 태그 알아보기  (0) 2018.07.29
#11 인용문(blockquote)과 주석문(<!---- -->)  (0) 2018.07.23
#10 hr, pre, xmp 태그 배우기  (0) 2018.07.13

댓글

Designed by JB FACTORY