사이즈 단위

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입니다. 그런 다음 150px의 10%를 취합니다. 15px입니다.

크기 및 길이

숫자에 단위를 연결하면 측정기준이 됩니다. 예를 들어 1rem은 측정기준입니다. 이 맥락에서 숫자에 연결된 단위는 사양에서 측정기준 토큰이라고 합니다. 길이는 거리를 나타내는 크기이며 절대값 또는 상대값일 수 있습니다.

절대 길이

모든 절대 길이는 동일한 기준에 대해 확인되므로 CSS에서 어디서든 예측할 수 있습니다. 예를 들어 cm를 사용하여 요소 크기를 조절한 다음 인쇄하면 눈금자와 비교했을 때 정확해야 합니다. cm 및 in와 같은 실제 단위는 픽셀 크기의 차이로 인해 화면에 이러한 크기로 안정적으로 표시되지 않습니다. 실측 단위는 인쇄 스타일 시트에서 가장 안정적으로 사용할 수 있습니다.

div {
  width: 10cm;
  height: 5cm;
  background: black;
}

이 페이지를 인쇄하면 div가 10x5cm 검은색 직사각형으로 인쇄됩니다. CSS는 디지털 콘텐츠뿐만 아니라 인쇄 콘텐츠의 스타일에도 사용됩니다. 절대 길이는 인쇄용으로 디자인할 때 유용합니다.

상대 길이

상대 길이는 백분율과 마찬가지로 기준 값을 기준으로 계산됩니다. 이러한 값과 비율의 차이점은 기본 글꼴 크기 또는 창 크기와 같은 관련 기본 크기를 기준으로 크기를 정의할 수 있다는 점입니다. 즉, CSS에는 글꼴 크기 측정항목을 기준으로 사용하는 ch와 표시 영역 (브라우저 창)의 너비를 기반으로 하는 vw와 같은 단위가 있습니다. 상대 길이는 반응형 특성으로 인해 웹에서 특히 유용합니다.

Font-size-relative 단위

CSS는 텍스트 자체의 크기 (em 단위) 또는 서체 문자의 너비 (ch 단위)와 같이 렌더링된 서체의 요소 크기와 관련된 유용한 단위를 제공합니다.

표시 영역 상대 단위

표시 영역 (브라우저 창)의 크기를 상대 기준으로 사용할 수 있습니다. 이러한 단위는 사용 가능한 뷰포트 공간을 분할합니다.

div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

이 예에서 1vw은 표시 영역 너비의 1%이므로 div는 표시 영역 너비의 10% 가 됩니다. p 요소의 max-width는 60ch입니다. 즉, 계산된 글꼴 및 크기에서 60'0'자(영문 기준)의 너비를 초과할 수 없습니다.

대체 표시 영역 상대 단위

표시 영역 크기가 변경되지 않는 한 표시 영역 상대 단위의 값은 동일하게 유지됩니다. 하지만 모바일 브라우저는 일반적으로 계산된 뷰포트 크기를 변경하지 않고 작은 화면에 최대한 많은 콘텐츠를 표시하기 위해 UI 요소를 표시하거나 숨깁니다. 뷰포트 상대 단위의 대안을 사용하여 표시 영역의 이러한 변경사항을 고려할 수 있습니다.

컨테이너 상대 단위

요소의 컨테이너 크기를 상대 기준으로 사용할 수 있습니다. 이러한 단위는 사용 가능한 컨테이너 공간을 분할합니다. 이는 사용 가능한 공간을 기반으로 글꼴 크기를 설정하는 컨테이너 쿼리 내에서 유용합니다.

기타 단위

특정 유형의 값을 처리하도록 지정된 다른 단위도 있습니다.

각도 단위

색상 모듈에서는 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 디스플레이와 같이 매우 높은 해상도의 화면을 감지하고 더 높은 해상도의 이미지를 제공하는 것입니다.

이해도 확인

크기에 대한 지식 테스트

리소스

• CSS 사양 값 및 단위 수준 4
• MDN의 크기 및 단위
• EMS 정보
• 비율 설명