이제 CSS 계단식 값 수학 함수가 기준 2024에 제공됩니다.

게시일: 2024년 5월 14일

이제 모든 주요 엔진에서 CSS 계단식 값 수학 함수인 round(), mod(), rem()을 지원합니다.

계단식 값 함수는 모두 다른 계단식 값에 따라 주어진 값을 변환합니다.

round() 함수

round() 함수는 반올림할 값, 반올림 간격, 선택적 반올림 전략을 사용합니다. 값은 반올림 전략에 따라 반올림 간격의 가장 가까운 정수 배수로 반올림됩니다.

반올림할 값 또는 반올림된 간격은 CSS 맞춤 속성이어야 합니다. 두 값을 모두 하드코딩하는 것은 유효하지만 값을 직접 계산할 수 있다면 숫자를 반올림하는 것은 큰 의미가 없습니다.

다음 CSS는 --my-font-size 값을 1rem 간격으로 반올림합니다.

font-size: round(var(--my-font-size), 1rem);

기본 반올림 전략은 nearest입니다. 반올림 전략을 포함하는 이전 예시는 다음과 같습니다.

font-size: round(nearest,var(--my-font-size), 1rem);

반올림 전략의 가능한 값은 다음과 같습니다.

  • up: JavaScript Math.ceil() 메서드와 같습니다. 값을 반올림 간격의 가장 가까운 정수 배수로 올림합니다.
  • down: JavaScript Math.floor() 메서드와 같습니다. 값을 반올림 간격의 가장 가까운 정수 배수로 내림합니다.
  • nearest (기본값): JavaScript Math.round()와 같습니다. 반올림 간격의 가장 가까운 정수 배수로 값을 올림 또는 내림합니다.
  • to-zero: JavaScript Math.trunc() 메서드와 같습니다. 값을 0에 더 가까운 반올림 간격의 가장 가까운 정수 배수로 반올림합니다.

round()에 대해 자세히 알아보려면 댄 윌슨의 새로운 CSS 수학: round()을 참고하세요.

rem()mod() 함수

rem()mod() CSS 함수는 JavaScript 나머지 연산자 (%)와 비슷한 방식으로 작동합니다. 두 값을 사용하며, 첫 번째 값 (분모)을 두 번째 값 (분자)으로 나눈 나머지를 반환합니다.

margin: rem(18px, 5px); /* returns 3px */

두 함수의 차이점은 rem()는 항상 피제수의 부호를 취하므로 첫 번째 값이 양수이면 반환 값도 양수입니다. mod() 함수는 divisor의 부호를 사용합니다.

rem()mod()에 대해 자세히 알아보려면 댄 윌슨의 새로운 CSS 수학: rem()mod()을 참고하세요.