8-1. CSS 속성 : 단위(font-size: px/ pt/ %/ em;)

8-1. CSS 속성 : 단위

 

 가. 절대 길이

 

   1) 정의

 

     - 고정된 크기 단위로, 다른 요소의 크기에 의해 영향을 받지 않음

     - CSS 에서는 0 값에 대한 단위는 따로 적지 않음

       ex) 0px, 0%, 0em, 0pt → 0

 

   2) 종류

 

    ■ px

 

     - 여러 환경에서도 디자인에 대하여 같게 표현함

     - 브라우저 호환성에 유리한 구조

     - 따라서, 디자인 의도가 많이 반영된 웹사이트에서는 px 단위를 사용하는 것을 권장

     - 단, 장치의 해상도에 따라 상대적임

 

    ■ pt

 

     - 인쇄물 또는 워드프로세서에서 사용되는 가장 작은 표준 인쇄단위

     - 웹 화면의 인쇄용 문서를 위한 스타일을 적용시 유용

     - 그러나, 사용 기기(Window, Mac)의 해상도에 따라 차이가 있어웹개발 시 권장하지 않음 

     - Window에서는 9pt = 12px / Mac에서는 9pt = 9px

 

 나. 상대 길이

 

   1) 정의

 

     - 다른 요소 또는 폰트 및 브라우저 등의 크기에 따라 값이 상대적으로 변함

 

   2) 종류

 

    ■ percent(단위 : %)

 

     - 부모의 값에 대하여 지정한 백분율로 환산한 크기를 출력하게 됨

     - 예를 들어, 해당 요소에 대하여 percent{font-size: 200%;} 의 스타일을 적용시키고,

       그 부모의 값이 20px이면, 해당 요소는 40px(= 20px * 200%)로 출력됨

 

    ■ em(단위 : em)

  

     - font-size 16px 기준 값에 대하여 환산한 크기를 출력하게 됨

     - 1em = 16px

     - 소수점 3자리까지 표현 가능함

     - 예를 들어, 해당 요소에 대하여 em{font-size: 2em;) 의 스타일을 적용시키면,

       해당 요소는 32px(= 16px * 2em)로 출력됨

     - 만약, em단위를 이용하여 스타일이 적용된 요소의 크기를 20px로 출력하고 싶다면,

       입력할 em의 값은 20px/16px = 1.25em 임