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

Rachel Andrew

이제 모든 주요 엔진에서 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에 가까운 반올림 간격의 가장 가까운 정수의 배수로 반올림합니다.

Dan Wilson의 The New CSS Math: round()에서 round()에 대해 자세히 알아보세요.

rem() 및 mod() 함수

rem() 및 mod() CSS 함수는 자바스크립트 나머지 연산자 (%)와 비슷한 방식으로 작동합니다. 두 값을 취하며, 첫 번째 (피제수)를 두 번째 값 (제수)으로 나누고 나머지가 반환됩니다.

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

두 함수의 차이점은 rem()가 항상 피제수의 부호를 취한다는 점입니다. 따라서 첫 번째 값이 양수이면 반환되는 값은 양수가 됩니다. mod() 함수는 제수의 부호를 사용합니다.

Dan Wilson의 The New CSS Math: rem() and mod()에서 rem() 및 mod()에 대해 자세히 알아보세요.