[css] 텍스트의 크기 단위 & Font Style

http://www.homejjang.com/07/size_unit.php 입니다.

font-size 속성을 사용할때 앞의 예제에서는 픽셀(px)과 포인트(pt)를 사용하였습니다.

이외에도 다양한 단위를 사용하여 글자의 크기를 지정할 수 있습니다.

글자의 크기를 지정하는 단위에는 절대단위와 상대단위로 나눌 수 있습니다.

절대단위	상대단위
pt (포인트, 1pt= 1/72 in)	% (기준이 되는 글꼴에 대한 퍼센트)
in (인치, 1in = 25.4 mm)	em (기준이 되는 글꼴에 대한 문자의 높이)
mm (밀리미터)
cm(센티미터)
pc (파이카, 1pc=12pt)
px (픽셀,1px=모니터의 1도트)

이 중 글자 크기를 지정할때 가장 많이 사용되는 단위는 px와 pt 입니다.

px와 pt는 절대단위이기 때문에 모니터의 해상도에 따라서 다르게 보이므로 적절하지 않다는 말도

있으나 9pt의 글자 크기가 가장 많이 사용되고 있습니다.

 

=========================================================================================

 

font 속성은 텍스트의 글꼴과 스타일을 지정합니다.

font-family 속성을 이용하면 텍스트의 글꼴을 지정할 수 있습니다.

<p style="font-family: 돋움">돋움 글꼴로 지정된 텍스트입니다.</p> <p style="font-family: 궁서">궁서 글꼴로 지정된 텍스트입니다.</p> <p style="font-family: 바탕">바탕 글꼴로 지정된 텍스트입니다.</p>

돋움 글꼴로 지정된 텍스트입니다. 궁서 글꼴로 지정된 텍스트입니다. 바탕 글꼴로 지정된 텍스트입니다.

 

font-size 속성을 이용하면 텍스트의 크기를 지정할 수 있습니다.

<p style="font-size: 10px">10픽셀로 지정된 텍스트입니다.</p> <p style="font-size: 13px">13픽셀로 지정된 텍스트입니다.</p> <p style="font-size: 9pt">9포인트로 지정된 텍스트입니다.</p> <p style="font-size: 10pt">10포인트로 지정된 텍스트입니다.</p>

10픽셀로 지정된 텍스트입니다. 13픽셀로 지정된 텍스트입니다. 9포인트로 지정된 텍스트입니다. 10포인트로 지정된 텍스트입니다.

 

font-weight 속성을 이용하면 텍스트의 굵기를 지정할 수 있습니다.

<p style="font-weight: normal">일반적인 텍스트입니다.</p> <p style="font-weight: bold">bold를 지정한 텍스트입니다.</p>

일반적인 텍스트입니다. bold를 지정한 텍스트입니다.