css 길이 단위
어제 width, height 속성을 배우면서 속성값 중 길이값length이 등장하는 걸 보셨을 거예요.
그래서 오늘은 css 길이 단위로 사용되는 것들은 어떤 것들이 있는지,
길이 단위의 종류와, 자주 쓰이는 단위, 그리고 사용법도 알아 보겠습니다.
자주 사용되고 언급되는 길이 단위는 px, em, in, pc, rem 등인데, 반응형 스킨에 알맞게 다양한 브라우저 창에 따라
크기 조절이 가능하게 하려면 em 또는 rem 사용을 권장합니다.
단위를 사용할 때, 앞에 숫자와 단위간 공백을 두지 않습니다.
예: 2em, 3px, 5in
하지만 길이값이 0일 경우 단위를 생략할 수 있습니다.
길이 단위는 상대 단위와 절대 단위로 나뉩니다.
상대 길이 단위
상대 길이 단위란 다른 길이에 상대적인 길이를 말하는데,
글꼴에 상대적인 길이가 있고, 브라우저 창(viewport)에 상대적인 길이가 있습니다.
상대 단위를 사용하면 브라우저 환경에 따라 좀 더 쉽게 크기 조절이 가능합니다.
-글꼴에 상대적인 길이
em
요소의 글꼴 크기에 상대적인 값(2em이란 현재 글꼴 크기의 2배를 의미함)
☞ 주로 웹 문서에서 사용되며, 다양한 장치에서 크기 조절이 가능함.
ex
현재 글꼴의 x 높이에 상대적인 값(드물게 사용되며, x높이란 소문자 x의 높이를 말함)
ch
"0"의 너비에 상대적인 값
rem(root em)
root 요소의 글꼴 크기에 상대적
☞ root 요소란 <html>요소를 말합니다.
각 요소마다 크기가 다를 수 있는 em과 달리, rem은 문서 전체에 일관적입니다.
☞ root 요소의 font-size를 참조하는 rem을 제외하고,
글꼴에 상대적인 길이는 부모로부터 상속받은 font-size 값을 참조함
부모에 font-size가 없을 때는, 초기값을 참조(일반적으로 16px)
예)
-브라우저 창(viewport)에 비례한 길이
vh
사용자 창 높이의 1%에 비례
vw
사용자 창 너비의 1%에 비례
vmin
사용자 창 높이와 너비 사이 최소 값의 1%에 비례
vmax
사용자 창의 높이와 너비 사이 최대값의 1%에 비례
솔직히 vewport에 비례한 길이값은 제가 사용해 본 적이 없어서 상세 설명이 어렵네요^^;
▶ css 길이 단위 브라우저 지원 상세
-이미지 출처 : http://www.w3schools.com/cssref/css_units.asp-
절대 길이 단위
절대 길이 단위는 고정된 크기 단위로, 장치에 따라 크기 조절이 안 된다는 단점이 있습니다.
px
픽셀(pixel). 컴퓨터 화면에서 사용되는 단위로, 1px은 컴퓨터 화면에서 점 1개와 같음.
mm
밀리미터
cm
센티미터 (1cm=10mm)
in
인치 (1in=2.54cm)
pt
포인트(point). 주로 인쇄매체에서 사용. (1pt=1인치의 1/72)
pc
피카(pica). (1pc = 12pt)
아래 이미지는 자주 쓰이는 단위별 비교 표입니다. 특히 font-size 사용 시 유용하므로
밑에 링크 글도 읽어 보실만 합니다. (각 브라우저마다 약간의 오차가 있을 수 있음)
글꼴 크기를 지정하는 font-size 속성(px, pt, %, em 차이)
percent(%)는 css에서는 상대적인 길이값으로 사용되고 있지만, 그 자체는 길이 단위가
아니므로 여기에서 다루지 않았습니다.
참조 : http://www.w3.org/TR/css3-values/
'css' 카테고리의 다른 글
| [CSS] @viewport rule (2) | 2015.01.15 |
|---|---|
| IE6,7,8에서 css3 속성(border-radius, box-shadow 등) 적용하기 (0) | 2014.12.22 |
| [css] height 속성 (0) | 2014.12.10 |
| [css] width 속성 (0) | 2014.12.09 |
| [css] float를 취소하기 (clearfix 4가지 방법) (0) | 2014.11.27 |
댓글