CSS 단위
- 이전 페이지 CSS 웹 레이아웃
- 다음 페이지 CSS 특성성
CSS 단위
CSS는 길이를 표현하는 여러 가지 단위를 가지고 있습니다.
많은 CSS 속성은 '길이' 값을 받아들입니다. 예를 들어 width、margin、padding、font-size 등.
길이는 길이 단위를 따르는 숫자입니다. 예를 들어 10px、2em 등.
예제
px(픽셀)를 사용하여 다양한 길이 값을 설정합니다:
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}
숫자와 단위 사이에는 공백이 있지 않아야 합니다. 그러나 값이 0일 경우 단위를 제외할 수 있습니다.
일부 CSS 속성에서는 음수 길이를 사용할 수 있습니다.
길이 단위는 두 가지 유형이 있습니다:절대 단위와상대 단위.
절대 길이
절대 길이 단위는 고정된 단위이며, 절대 길이 단위로 표현된 길이는 정확하게 해당 크기로 표시됩니다.
화면에서는 절대 길이 단위를 사용하지 않는 것이 좋습니다. 그러나 출력 매체가 알려져 있다면 사용할 수 있습니다. 예를 들어, 인쇄 레이아웃에 사용할 수 있습니다.
| 단위 | 설명 | TIY |
|---|---|---|
| cm | 센티미터 | 시도해 보세요 |
| mm | 밀리미터 | 시도해 보세요 |
| in | 인치(1in = 96px = 2.54cm) | 시도해 보세요 |
| px * | 픽셀(1px = 1/96th of 1in) | 시도해 보세요 |
| pt | 포인트(1pt = 1/72 of 1in) | 시도해 보세요 |
| pc | 파이카(1pc = 12pt) | 시도해 보세요 |
* 픽셀(px)는 관찰 장치에 대한 것입니다. 저 dpi 장치에서는 1px는 디스플레이의 하나의 장치 픽셀(점)입니다. 프린터와 고 해상도 디스플레이에서는 1px는 여러 장치 픽셀을 의미합니다.
상대 길이
상대 길이 단위는 다른 길이 속성에 대한 길이를 상대적으로 정의합니다. 상대 길이 단위는 다양한 렌더링 매체 간의 스케일링에서 더 나은 성능을 보입니다.
| 단위 | 설명 | TIY |
|---|---|---|
| em | 요소의 폰트 크기(폰트-사이즈)에 대한 비율(2em은 현재 폰트 크기의 2배를 의미) | 시도해 보세요 |
| ex | 현재 폰트의 x-height(보통 사용되지 않음) | 시도해 보세요 |
| ch | "0"(영어로는 'zero')의 너비에 대한 비율 | 시도해 보세요 |
| rem | 루트 요소의 폰트 크기(폰트-사이즈)에 대한 비율 | 시도해 보세요 |
| vw | 비주얼 포트의 * 너비에 대한 1% | 시도해 보세요 |
| vh | 비주얼 포트의 * 높이에 대한 1% | 시도해 보세요 |
| vmin | 비주얼 포트의 * 작은 크기에 대한 1% | 시도해 보세요 |
| vmax | 비전 포트에 대한 상대적* 더 큰 크기의 1％ | 시도해 보세요 |
| % | 부모 요소에 대한 상대적 | 시도해 보세요 |
훌륭:em과 rem 단위를 사용하여 완벽한 확장 가능한 레이아웃을 만들 수 있습니다!
* 비전 포트(Viewport) = 브라우저 창의 크기. 비전 포트가 50 센티미터 넓이인 경우 1vw = 0.5 센티미터입니다.
브라우저 지원
표의 숫자는 해당 길이 단위를 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.
| 길이 단위 | |||||
|---|---|---|---|---|---|
| em, ex, %, px, cm, mm, in, pt, pc | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
| ch | 27.0 | 9.0 | 1.0 | 7.0 | 20.0 |
| rem | 4.0 | 9.0 | 3.6 | 4.1 | 11.6 |
| vh, vw | 20.0 | 9.0 | 19.0 | 6.0 | 20.0 |
| vmin | 20.0 | 12.0 | 19.0 | 6.0 | 20.0 |
| vmax | 26.0 | 16.0 | 19.0 | 7.0 | 20.0 |
- 이전 페이지 CSS 웹 레이아웃
- 다음 페이지 CSS 특성성
