CSS 팟캐스트 - 008: 크기 단위
웹은 반응형 매체이지만 전반적인 인터페이스 품질을 개선하기 위해 크기를 제어해야 하는 경우가 있습니다. 가독성을 높이기 위해 줄 길이를 제한하는 것이 좋은 예입니다. 웹과 같이 유연한 매체에서 어떻게 해야 할까요?
이 경우 계산된 크기로 렌더링된 글꼴의 '0' 문자의 너비와 같은 ch 단위를 사용할 수 있습니다.
이 단위를 사용하면 텍스트 크기를 조절하도록 설계된 단위로 텍스트의 너비를 제한할 수 있으므로 텍스트 크기와 관계없이 예측 가능한 제어를 할 수 있습니다.
ch 단위는 이 예와 같이 특정 맥락에 유용한 몇 안 되는 단위 중 하나입니다.
숫자
숫자는 opacity, line-height를 정의하는 데 사용되며, rgb의 색상 채널 값에도 사용됩니다.
숫자는 단위 없는 정수(1, 2, 3, 100)와 소수점 숫자(.1, .2, .3)입니다.
숫자는 맥락에 따라 의미가 다릅니다.
예를 들어 line-height를 정의할 때 지원 단위 없이 정의하면 숫자가 비율을 나타냅니다.
p {
font-size: 24px;
line-height: 1.5;
}
이 예에서 1.5는 p 요소의 계산된 픽셀 글꼴 크기의 150%와 같습니다.
즉, p의 font-size가 24px이면 줄 높이가 36px로 계산됩니다.
숫자는 다음 위치에서도 사용할 수 있습니다.
- 필터 값을 설정할 때:
filter: sepia(0.5)는 요소에50%세피아 필터를 적용합니다. - 불투명도를 설정할 때:
opacity: 0.5는50%불투명도를 적용합니다. - 색상 채널:
rgb(50, 50, 50). 여기서 0~255의 값은 색상 값을 설정하는 데 허용됩니다. 색상 수업 보기 - 요소를 변환하려면
transform: scale(1.2)는 요소를 초기 크기의 120% 로 조정합니다.
비율
CSS에서 비율을 사용할 때는 비율이 계산되는 방식을 알아야 합니다.
예를 들어 width는 상위 요소에서 사용 가능한 너비의 비율로 계산됩니다.
div {
width: 300px;
height: 100px;
}
div p {
width: 50%;
}
위의 예에서 div p의 너비는 150px입니다(레이아웃이 기본 box-sizing: content-box를 사용한다고 가정).
margin 또는 padding를 백분율로 설정하면 방향과 관계없이 상위 요소의 너비의 일부가 됩니다.
div {
width: 300px;
height: 100px;
}
div p {
margin-top: 50%; /* calculated: 150px */
padding-left: 50%; /* calculated: 150px */
}
위 스니펫에서 margin-top와 padding-left는 모두 150px로 계산됩니다.
div {
width: 300px;
height: 100px;
}
div p {
width: 50%; /* calculated: 150px */
transform: translateX(10%); /* calculated: 15px */
}
transform 값을 비율로 설정하면 변환이 설정된 요소를 기준으로 합니다.
이 예에서 p의 translateX 값은 10%이고 width는 50%입니다.
먼저 너비를 계산합니다. 150px는 상위 요소 너비의 50%이므로
그런 다음 150px의 10%를 취합니다. 15px입니다.
크기 및 길이
숫자에 단위를 연결하면 해당 단위가 차원이 됩니다.
예를 들어 1rem은 측정기준입니다.
이 문맥에서 숫자에 연결된 단위를 사양에서는 크기 토큰으로 지칭합니다.
길이는 거리를 나타내는 크기이며 절대적 또는 상대적일 수 있습니다.
절대 길이
모든 절대 길이는 동일한 기준에 대해 확인되므로 CSS에서 어디서든 예측할 수 있습니다.
예를 들어 cm를 사용하여 요소 크기를 조절한 다음 인쇄하면 눈금자와 비교했을 때 정확해야 합니다.
div {
width: 10cm;
height: 5cm;
background: black;
}
이 페이지를 인쇄하면 div이 10x5cm 검은색 직사각형으로 인쇄됩니다.
CSS는 디지털 콘텐츠뿐 아니라 인쇄 콘텐츠의 스타일을 지정하는 데도 사용됩니다.
절대적인 길이는 인쇄용으로 디자인할 때 매우 유용할 수 있습니다.
| 단위 | 이름 | 다음과 같습니다. |
|---|---|---|
| cm | 센티미터 | 1cm = 96px/2.54 |
| mm | 밀리미터 | 1mm = 1cm의 10분의 1 |
| Q | 1/4밀리미터 | 1Q = 1cm의 1/40 |
| in | 인치 | 1인치 = 2.54cm = 96픽셀 |
| pc | Picas | 1개 = 1인치의 6분의 1 |
| 포르투갈어 | 포인트 | 1pt = 1인치의 1/72 |
| px | 픽셀 | 1px = 1인치의 1/96 |
상대 길이
상대적 길이는 백분율처럼 기본값을 기준으로 계산됩니다.
백분율과 다른 점은 요소의 크기를 문맥에 따라 조절할 수 있다는 점입니다.
즉, CSS에는 텍스트 크기를 기준으로 사용하는 ch와 뷰포트(브라우저 창)의 너비를 기준으로 하는 vw와 같은 단위가 있습니다.
상대 길이는 반응형 특성으로 인해 웹에서 특히 유용합니다.
Font-size-relative 단위
CSS는 텍스트 자체의 크기(em 단위) 또는 서체 문자의 너비(ch 단위)와 같이 렌더링된 서체의 요소 크기와 관련된 유용한 단위를 제공합니다.
| 단위 | 상대: |
|---|---|
| em | 글꼴 크기를 기준으로 1.5em은 상위 요소의 기본 계산된 글꼴 크기보다 50% 더 큽니다. (이전에는 대문자 'M'의 높이) |
| ex | 요소의 현재 계산된 글꼴 크기에서 x-height, 문자 'x' 또는 `.5em`을 사용할지 결정하는 휴리스틱입니다. |
| cap | 요소의 현재 계산된 글꼴 크기에서 대문자의 높이입니다. |
| ch | 요소 글꼴의 좁은 글리프의 평균 문자 전진('0' 글리프로 표시됨)입니다. |
| ic | 요소 글꼴에 포함된 전체 너비 글리프의 평균 문자 전수로, ' 자체적으로 |
| rem | 루트 요소의 글꼴 크기입니다(기본값은 16px). |
| 시간 | 요소의 줄 높이입니다. |
| rlh | 루트 요소의 줄 높이입니다. |
뷰포트 상대 단위
표시 영역 (브라우저 창)의 크기를 상대적인 기준으로 사용할 수 있습니다. 이러한 단위는 사용 가능한 뷰포트 공간을 분할합니다.
| 단위 | 상대적 |
|---|---|
| vw | 뷰포트 너비의 1% 사용자는 이 단위를 사용하여 페이지 너비에 따라 헤더 글꼴의 크기를 조절하는 등 멋진 글꼴 기술을 사용합니다. 사용자가 크기를 조절할 때 글꼴도 크기가 조정됩니다. |
| vh | 뷰포트 높이의 1%입니다. 예를 들어 바닥글 툴바가 있는 경우 이를 사용하여 UI에서 항목을 정렬할 수 있습니다. |
| vi | 루트 요소의 인라인 축에서 표시 영역 크기의 1%입니다. 축은 쓰기 모드를 나타냅니다. 영어와 같은 가로 쓰기 모드에서는 인라인 축이 가로입니다. 일부 일본 서체와 같은 세로 쓰기 모드에서는 인라인 축이 위에서 아래로 실행됩니다. |
| vb | 루트 요소의 블록 축에서 표시 영역 크기의 1%입니다. 블록 축의 경우 언어의 방향입니다. 영어와 같은 LTR 언어에는 영어 독자가 위에서 아래로 페이지를 파싱하므로 세로 블록 축이 있습니다. 세로 쓰기 모드에는 가로 블록 축이 있습니다. |
| vmin | 표시 영역의 작은 측정기준의 1%입니다. |
| vmax | 표시 영역의 더 큰 측정기준의 1% |
div {
width: 10vw;
}
p {
max-width: 60ch;
}
이 예에서 1vw은 뷰포트 너비의 1%이므로 div은 뷰포트 너비의 10%가 됩니다.
p 요소의 max-width는 60ch입니다. 즉, 계산된 글꼴 및 크기에서 60'0'자(영문 기준)의 너비를 초과할 수 없습니다.
기타 단위
특정 유형의 값을 처리하도록 지정된 다른 단위도 있습니다.
각도 단위
색상 모듈에서는 hsl의 색조와 같은 각도 값을 정의하는 데 유용한 각도 단위를 살펴봤습니다.
또한 변환 함수 내에서 요소를 회전하는 데도 유용합니다.
div {
width: 150px;
height: 150px;
transform: rotate(60deg);
}
deg 각도 단위를 사용하면 중심축에서 div을 90° 회전할 수 있습니다.
div {
background-image: url('a-low-resolution-image.jpg');
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
div {
background-image: url('a-high-resolution-image.jpg');
}
}
해상도 단위
이전 예에서 min-resolution의 값은 192dpi입니다.
dpi 단위는 인치당 도트 수를 나타냅니다.
이를 위한 유용한 컨텍스트는 미디어 쿼리에서 Retina 디스플레이와 같이 매우 높은 해상도의 화면을 감지하고 더 높은 해상도의 이미지를 제공하는 것입니다.
이해도 확인
크기 조정에 대한 지식 테스트
다음 중 유효한 측정기준은 무엇인가요?
절대 단위와 상대 단위는 어떻게 다른가요?
표시 영역 단위는 절대 단위입니다.