2018. 1. 12. 11:59ㆍ웹 표준 퍼블리싱 바이블
1. CSS로 지정하는 길이의 단위 알아보기
CSS에서 지정하는 길이값의 단위는 문서가 표현되는 매체의 종류(인쇄물/모니터)에 따라 달라질 수 있습니다. 인쇄용이라면 "절대값"과 관련된 단위인 "in(인치), cm(센티미터), mm(밀리미터), pt(포인트), pc(파이카)" 등을 적용하고 모니터(또는 스크린)용이라면 "em, ex, px, %" 등의 "상대값"을 적용합니다. 웹작업에서는 주로 상대값으로 지정하는 것이 효과적입니다.
HTML5에서는 "ren과 ch"가 추가됐고, 뷰포트(viewport)의 백분율 길이인 "vw, vh, vmin, vmax"등이 추가됐습니다.
1-1. 절대값에 해당하는 단위는 in, cm, mm, pt, pc 등이 있는데, 이 값들의 길이는 다음과 같습니다.
1in = 96in 1cm = 37.8cm 1mm = 3.78mm 1pt = 1/72pt 1px = 12px
|
1-2. "픽셀(px)" 단위는 해상도와 밀접한 관련이 있습니다. 디스플레이의 해상도가 높다면 상대적으로 작아 보이게 되고, 해상도가 낮다면 상대적으로 커 보이게 됩니다. 일반적으로 해상도를 조절하는 경우가 많지 않기 때문에 절대값 같은 느낌이 있습니다.
<style type="text/css"> p{ width: 1200px; background-color: orange; } </style>
|
1-3. "백문율(%)"로 값을 지정한다는 것은 부모요소의 길이를 기준으로 비율을 표현하는 것을 의미합니다.
<style type="text/css"> p{ width: 50%; background-color: orange; } </style>
|
1-4. "em"은 상대적인 단위로서, 부모요소의 폰트 사이즈에 대한 상대적인 값을 적용할 수 있습니다. 부모요소의 폰트 크기가 지정되지 않았을 경우 "1em"은 "16px"과 같은 값입니다. 만약, 부모요소의 글자 크기가 12px 로 지정되어 있다면 1.1 em을 지정한 요소의 크기는 13.2px이 되는 것이죠.
<style type="text/css"> body{ font-size: 12px; } p{ width: 30em; background-color: orange; font-size: 1.1em; } </style>
|
위 코드에서 <body>요소에 지정된 "font-size"의 값은 12px입니다. 그럼 <p>요소에 지정된 font-size의 값 1.1em은 "12X1.1"이므로 결국 13.2px의 크기를 가지게 되고, width값 30em은 <p>요소 내의 폰트 사이즈를 기준하여 정해지므로 "12X1.1X30"이므로 396px의 크기를 가집니다.
1-5. HTML5에서 새로 추가된 단위 "ren"은 em단위와 같은 성질을 가지고 있지만, 부모요소를 기준으로 하는 것이 아니라 항상 루트(root, 문서의 기본값)을 기준으로 한다는 점이 특징입니다.
<style type="text/css"> body{ font-size: 12px; } p{ font-size: 1.1em; } span{ font-size: 2em; } </style>
|
<span>요소의 font-size 값은 "12X1.1X2=26.4px"이 됩니다.
다음과 같이 작성하면 <span>요소의 font-size 값은 문서의 기본 font-size인 1em(16px)을 기준으로 적용되므로 "16X2=32px"이 됩니다.
<style type="text/css"> body{ font-size: 12px; } p{ font-size: 1.1em; } span{ font-size: 2ren; } </style>
|
1-6. 뷰포트(viewport)에 대응해서 크기를 지정하는 방법으로 "vw, vh, vmin, vmax" 등의 단위가 있습니다. 특히 이 중 "vw, vh" 등에 대해서는 백분율(%)을 생각하면 쉽게 이해할 수 있습니다.
1vw |
뷰포트 폭의 1% |
1vh |
뷰포트 높이의 1% |
1vmac |
1vw 또는 1vh 중 작은값을 기준으로 |
1vmin |
1vw 또는 1vh 중 큰값을 기준으로 |
'웹 표준 퍼블리싱 바이블' 카테고리의 다른 글
| 4-2. 다양한 선택자 알아보기 - 2 (0) | 2018.01.16 |
|---|---|
| 4-2. 다양한 선택자 알아보기 - 1 (0) | 2018.01.15 |
| 4-1. CSS의 적용 방법과 기본문법 - 2 (0) | 2018.01.11 |
| 4-1. CSS의 적용 방법과 기본문법 - 1 (1) | 2018.01.08 |
| 3-12. 아이프레임(<iframe>)의 다양한 속성 알아보기 (0) | 2017.12.26 |