CSS에는 길이를 표현하는 여러 가지 단위가 있습니다.
많은 CSS 속성은 width, margin, padding, font-size 등과 같은 “길이”값을 사용합니다.
길이(Length)는 숫자 뒤에 10px, 2em 등과 같은 길이 단위를 사용합니다.
px (pixels)를 사용하여 다양한 길이 값을 설정합니다.
h1 { font-size: 60px; } p { font-size: 25px; line-height: 50px; }
Note:
숫자와 단위 사이에 공백을 표시할 수 없습니다. 단, 값이 0이면 단위를 생략할 수 있습니다.
일부 CSS 속성의 경우, 음수 길이(negative length)가 허용됩니다.
길이 단위에는 절대(absolute) 및 상대(relative)의 두 가지 유형이 있습니다.
절대 길이 단위는 고정되어 있으며, 이러한 단위로 표시된 길이는 정확히 해당 크기로 표시됩니다.
화면 크기가 너무 다양하기 때문에, 절대 길이 단위는 화면에 사용하지 않는 것이 좋습니다.
그러나 인쇄 레이아웃과 같이 출력 매체가 알려진 경우 사용할 수 있습니다.
| Unit | Description |
|---|---|
| cm | centimeters |
| mm | millimeters |
| in | inches (1in = 96px =2.54cm) |
| px * | pixels (1px = 1/96th of 1in) |
| pt | points (1pt = 1/72th of 1in) |
| pc | picas (1pc = 12pt) |
* 픽셀(px)은 화면기기에 상대적(relative)입니다.
낮은 dpi 기기의 경우, 1px는 디스플레이의 하나의 디바이스 픽셀 (도트)입니다.
프린터 및 고해상도 화면의 경우 1px는 다수의 디바이스 픽셀을 의미합니다.
상대 길이 단위는 다른 길이 속성에 대한 상대적인 길이를 지정합니다.
상대적 길이 단위는 다른 렌더링 매체 사이에서 더 잘 비례됩니다.
| Unit | Description |
|---|---|
| em | 요소의 글꼴 크기에 상대적 (2em은 현재 글꼴 크기의 2 배를 의미 함) |
| ex | 현재 글꼴의 x 높이에 상대적 (거의 사용되지 않음) |
| ch | “0” (zero)의 너비에 상대적 |
| rem | 루트 요소(root element)의 글꼴 크기에 상대적 |
| vw | 뷰포트(viewport)* 너비의 1%에 상대적 |
| vh | 뷰포트(viewport)* 높이의 1%에 상대적 |
| vmin | 뷰포트(viewport)*의 더 작은 크기의 1%에 상대적 |
| vmax | 뷰포트(viewport)*의 더 큰 크기의 1%에 상대적 |
| % | 부모 요소(parent element)에 상대적 |
Tip:
em 및 rem 단위는 완벽하게 확장 가능한 레이아웃을 만드는 데 실용적입니다!
* 뷰포트 = 브라우저 창 크기. 뷰포트 너비가 50cm이면 1vw = 0.5cm입니다.
<!DOCTYPE html> <html> <head> <style> p {font-size: 16px;line-height: 2em;} div {font-size: 30px;border: 1px solid #000;} span {font-size: 0.5em;} </style> </head> <body> <p>These paragraph have a calculated line-height of : 2 x 16px = 32px.</p> <p>These paragraph have a calculated line-height of : 2 x 16px = 32px.</p> <p>These paragraph have a calculated line-height of : 2 x 16px = 32px.</p> <div>The font-size of the div element is set to 30px. <span>The span element inside the div element has a font-size of 0.5em, which equals to 0.5 x 30 = 15px</span>.</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <style> html {font-size: 16px; } div {border: 1px solid #000; font-size: 3rem;} #top-div {font-size: 2rem; border: 1px solid red;} </style> </head> <body> <p>The font-size of this document is 16px.</p> <div id="top-div"> The font-size of this div element is 2rem, which translates to 2 x the browser's font size. <div>The font-size of this div element is 3rem. It also shows that it does not inherit from its parent element font size.</div> </div> <p>The rem unit sets the font-size relative to the browser's base font-size, and will not inherit from its parents.</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <style> h1 {font-size: 20vw;} </style> </head> <body> <h1>Hello</h1> <p>Resize the width of the browser window to see how the font-size of h1 changes.</p> <p>1vw = 1% of viewport width</p> <p>The vw unit is not supported in IE8 and earlier.</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <style> h1 {font-size: 20vh;} </style> </head> <body> <h1>Hello</h1> <p>Resize the height of the browser window to see how the font-size of h1 changes.</p> <p>1vh = 1% of viewport height</p> <p>The vh unit is not supported in IE8 and earlier.</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <style> h1 {font-size: 15vmin;} </style> </head> <body> <h1>Hello</h1> <p>Resize the browser window (both width and height) to see how the font-size of h1 changes.</p> <p>1vmin = 1vw or 1vh, whichever is smaller.</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <style> h1 {font-size: 15vmax;} </style> </head> <body> <h1>Bonjour</h1> <p>Resize the browser window (both width and height) to see how the font-size of h1 changes.</p> <p>1vmax = 1vw or 1ch, whichever is larger.</p> <p>The vmax unit is not supported in Edge 15 and earlier, nor in Safari 6.1 and earlier.</p> </body> </html>