사이즈 단위

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.5p 요소의 계산된 픽셀 글꼴 크기150%와 같습니다. 즉, pfont-size24px이면 줄 높이는 36px로 계산됩니다.

숫자는 다음 위치에서도 사용될 수 있습니다.

  • 필터 값을 설정할 때 filter: sepia(0.5)은 요소에 50% 세피아 필터를 적용합니다.
  • 불투명도를 설정할 때: opacity: 0.550% 불투명도를 적용합니다.
  • 색상 채널: 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-toppadding-left는 모두 150px로 계산됩니다.

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; /* calculated: 150px */
  transform: translateX(10%); /* calculated: 15px */
}

transform 값을 백분율로 설정하면 변환 세트가 있는 요소를 기반으로 합니다. 이 예에서 ptranslateX 값은 10%이고 width50%입니다. 먼저 상위 요소 너비의 50%이므로 너비를 150px로 계산합니다. 그런 다음 150px10%(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 4분의 1mm 1Q = 1cm의 1/40
in 인치 1인치 = 2.54cm = 96px
PC 피카 1개 = 1인치의 6분의 1
포르투갈어 포인트 1pt = 1인치의 1/72
픽셀 픽셀 1px = 1인치의 1/96번째

상대적 길이

상대적 길이는 백분율처럼 기본값을 기준으로 계산됩니다. 이 값과 백분율의 차이점은 상황에 따라 요소의 크기를 조정할 수 있다는 점입니다. 즉, CSS에는 ch와 같이 텍스트 크기를 기본으로 사용하는 단위가 있습니다. 표시 영역 (브라우저 창)의 너비를 기반으로 하는 vw입니다. 상대적 길이는 반응형 특성으로 인해 특히 웹에서 유용합니다.

글꼴 크기 기준 단위

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

단위 상대:
이메일 글꼴 크기를 기준으로 즉, 1.5em은 상위 요소의 기본 계산된 글꼴 크기보다 50% 더 큽니다. (이전에는 대문자 'M'의 높이)
예: 휴리스틱을 사용하여 x-height, 요소의 현재 계산된 글꼴 크기에서 문자 'x' 또는 `.5em` 입니다.
한도 현재 계산된 요소의 글꼴 크기에서 대문자의 높이입니다.
채널 평균 캐릭터 진도 요소의 글꼴에 있는 좁은 글리프 ('0' 글리프로 표시)
IC 보통 캐릭터 어드벤처 전체 너비 글리프로 표현되며 '지도'로 표현됨 (CJK 수자 표기, U+6C34) 글리프
루트 요소의 글꼴 크기입니다. 기본값은 16픽셀입니다.
시간 요소의 행 높이입니다.
rlh 루트 요소의 행 높이입니다.
텍스트 CSS는 10배의 높이와 함께 어센더 높이, 하강기 높이, x높이 라벨이 지정되어 있습니다. x-높이는 1ex를 나타내고 0은 1ch를 나타냅니다.

표시 영역 기준 단위

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

단위 상대:
vw 표시 영역 너비의 1% 입니다. 사람들은 이 장치를 사용하여 멋진 글꼴 트릭을 하고, 예를 들어 페이지 너비에 따라 헤더 글꼴의 크기를 조절하거나 글꼴 크기도 조정됩니다
vh 표시 영역 높이의 1% 이를 사용하여 UI에서 항목을 정렬하거나 예를 들어 바닥글 툴바가 있는 경우
vi 루트 요소의 인라인 축에 있는 표시 영역 크기의 1%. 축은 쓰기 모드를 나타냅니다. 영어와 같은 가로 쓰기 모드에서는 인라인 축은 가로입니다. 일부 일본어 서체와 같은 세로 쓰기 모드에서는 인라인 축이 위에서 아래로 실행됩니다.
동사 루트 요소의 블록 축에 있는 표시 영역 크기의 1%. 블록 축의 경우 언어의 방향이 됩니다. 영어와 같은 LTR 언어에는 세로 블록 축이 있습니다. 왜냐하면 영어 독자들이 위에서 아래로 페이지를 파싱하기 때문입니다. 세로 쓰기 모드에는 가로 블록 축이 있습니다.
vmin 표시 영역 작은 크기의 1% 입니다.
vmax 표시 영역 크기 중 1% 입니다.
div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

이 예에서 1vw표시 영역 너비의 1%이므로 div는 표시 영역 너비의 10% 가 됩니다. p 요소의 max-width60ch입니다. 즉, 너비가 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 단위는 인치당 도트 수를 의미합니다. 이를 위해 유용한 컨텍스트는 초고해상도 화면을 감지한 것입니다. 더 높은 해상도의 이미지를 제공하도록 설계되었습니다.

이해도 확인

크기 조정에 대한 지식 테스트

다음 중 유효한 측정기준은 무엇인가요?

cm
센티미터, 유효한 절대 크기입니다.
ui
사용자 인터페이스는 CSS의 측정기준이 아닙니다.
in
인치, 유효한 절대 크기입니다.
8일
CSS 측정기준이 아닙니다.
픽셀
픽셀: 유효한 절대 크기입니다.
ch
문자 단위, 유효한 상대 크기
UX
사용자 환경은 CSS의 측정기준이 아닙니다.
문자 'M' 유효한 상대적 크기여야 합니다.
예:
문자 'x' 유효한 상대적 크기여야 합니다.

절대 단위와 상대 단위는 어떻게 다른가요?

절댓값은 변경할 수 없지만 상대 단위는 변경할 수 있습니다.
절댓값은 변경될 수 있지만 계산되는 기준은 변경할 수 없습니다.
절대 길이는 단일 공유 기준 값을 기준으로 계산되며, 상대 단위는 변할 수 있는 기준 값과 비교됩니다.
상대 단위는 컨텍스트 인식으로 인해 더 적응적이고 유동적이지만, 특정 디자인의 기본이 될 수 있는 절대 단위에는 성능 및 예측 가능성이 있습니다.

표시 영역 단위는 절대 값입니다.

절대적이라고 느껴질 수도 있지만, 표시 영역(iframe 또는 WebView일 수 있음)을 기준으로 하며 항상 기기 화면 크기를 나타내지는 않습니다.
거짓
이 창은 만들어진 문서 창을 기준으로 하며, 기기 화면과 같을 수도 있고 아닐 수도 있습니다.

리소스