CSS 팟캐스트 - 008: 크기 단위
웹은 반응형 매체이지만, 전반적인 인터페이스 품질을 개선하기 위해 크기를 조절하고 싶을 때가 있습니다. 이에 대한 좋은 예는 가독성을 개선하기 위해 행 길이를 제한하는 것입니다. 웹과 같은 유연한 매체에서는 이를 어떻게 수행할 수 있을까요?
이 경우 ch
단위를 사용할 수 있습니다. 이 단위는 계산된 크기에서 렌더링된 글꼴의 '0' 문자 너비와 같습니다.
이 단위를 사용하면 텍스트 크기를 조절하도록 설계된 단위로 텍스트 너비를 제한할 수 있으므로 텍스트의 크기에 관계없이 예측 가능한 제어가 가능합니다.
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%;
}
위 예에서 레이아웃에서 기본 box-sizing: content-box
를 사용한다고 가정할 때 div p
의 너비는 150px
입니다.
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%
입니다.
먼저 너비가 상위 요소 너비의 50%이므로 150px
를 계산합니다.
그런 다음 150px
의 10%
(15px
)를 가져옵니다.
크기 및 길이
숫자에 단위를 추가하면 측정기준이 됩니다.
예를 들어 1rem
은 측정기준입니다.
이 문맥에서 숫자에 연결된 단위를 사양에서는 크기 토큰이라고 합니다.
길이는 거리를 나타내는 크기이며 절대적이거나 상대적일 수 있습니다.
절대 길이
모든 절대 길이는 동일한 베이스를 기준으로 확인되므로
CSS에서 사용되는 위치에 관계없이 예측 가능합니다.
예를 들어 cm
를 사용하여 요소의 크기를 조절하고 출력하는 경우 눈금자와 비교하면 정확해야 합니다.
div {
width: 10cm;
height: 5cm;
background: black;
}
이 페이지를 인쇄하면 div
이 10x5cm 검은색 직사각형으로 인쇄됩니다.
CSS는 디지털 콘텐츠뿐만 아니라 인쇄 콘텐츠의 스타일에도 사용됩니다.
절대 길이는 인쇄용으로 디자인할 때 정말 편리합니다.
단위 | 이름 | 다음과 같음 |
---|---|---|
cm | 센티미터 | 1cm = 96px/2.54 |
mm | 밀리미터 | 1mm = 1cm의 1/10 |
Q | 1/4밀리미터 | 1Q = 1cm의 1/40 |
in | 인치 | 1in = 2.54cm = 96px |
pc | 피카스 | 1pc = 1in의 1/6 |
점 | 점수 | 1pt = 1in의 1/72 |
픽셀 | 픽셀 | 1px = 1인치의 1/96 |
상대 길이
상대 길이는 백분율과 같이 기본값을 기준으로 계산됩니다.
이러한 비율과 비율의 차이점은 상황에 따라 요소의 크기를 조정할 수 있다는 것입니다.
즉, CSS에는 텍스트 크기를 기준으로 사용하는 ch
및 표시 영역의 너비 (브라우저 창)를 기반으로 하는 vw
와 같은 단위가 있습니다.
상대 길이는 응답성으로 인해 웹에서 특히 유용합니다.
글꼴 크기 기준 단위
CSS는 텍스트 자체 크기 (em
단위) 또는 서체 문자 너비 (ch
단위)와 같이 렌더링된 서체 요소의 크기에 상대적인 유용한 단위를 제공합니다.
단위 | 기준: |
---|---|
em | 글꼴 크기 대비, 즉 1.5em은 상위 요소의 기본 계산된 글꼴 크기보다 50% 더 큽니다. (지금까지 대문자 'M')의 높이입니다. |
예 | 요소의 현재 계산된 글꼴 크기에 x 높이, 문자 'x' 또는 '.5em'을 사용할지 결정하는 휴리스틱입니다. |
캡 | 요소의 현재 계산된 글꼴 크기에서 대문자의 높이입니다. |
ch | 요소의 글꼴에서 좁은 글리프의 평균 문자 진행('0' 글리프로 표시됨) |
ic | 요소 글꼴에서 전체 너비 글리프의 평균 문자 진행이며, '세로' (CJK 워터 한자 표기, U+6C34) 글리프로 표현됩니다. |
렘 | 루트 요소의 글꼴 크기 (기본값: 16픽셀) |
lh | 요소의 행 높이입니다. |
지루 | 루트 요소의 행 높이입니다. |
표시 영역 기준 단위
표시 영역 (브라우저 창)의 크기를 상대적 기준으로 사용할 수 있습니다. 이러한 단위는 사용 가능한 표시 영역 공간을 차지합니다.
단위 | 기준 |
---|---|
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
입니다. 즉, 계산된 글꼴 및 크기에서 너비 '0' 60자를 초과할 수 없습니다.
기타 단위
특정 유형의 값을 처리하도록 지정된 몇 가지 다른 단위가 있습니다.
각도 단위
색상 모듈에서는 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
단위는 인치당 도트 수를 의미합니다.
이를 위한 유용한 컨텍스트는 미디어 쿼리의 레티나 디스플레이와 같은 매우 고해상도 화면을 감지하고 더 높은 해상도 이미지를 제공하는 것입니다.
학습 내용 확인하기
크기 조정에 관한 지식 테스트
다음 중 유효한 측정기준은 무엇인가요?
절대 단위와 상대 단위는 어떻게 다른가요?
표시 영역 단위는 절대적입니다.