모든 주요 엔진은 이제 CSS 단계식 값 수학 함수를 지원합니다. round(), mod(), 그리고 rem()입니다.
계단식 값 함수는 모두 지정된 값을 다른 값에 따라 변환합니다. step value에 저장합니다.
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: JavaScriptMath.ceil()메서드와 같습니다. 값을 반올림합니다. 가장 가까운 정수의 배수로 계산됩니다.down: JavaScriptMath.floor()메서드와 같습니다. 값을 반올림합니다. 가장 가까운 정수의 배수로 내림합니다.nearest(기본값): JavaScriptMath.round()와 같습니다. 반올림 올림 간격의 가장 가까운 정수의 배수로 올림 또는 내림합니다.to-zero: JavaScriptMath.trunc()메서드와 같습니다. 값을 반올림합니다. 0에 가까운 반올림 간격의 가장 가까운 정수의 배수로 변환됩니다.
round()에 대해 자세히 알아보기:
새로운 CSS 수학: round(),
작성자: Dan Wilson
rem() 및 mod() 함수
rem() 및 mod() CSS 함수는 JavaScript와 비슷한 방식으로 작동합니다.
나머지 연산자 (%). 이 함수는 두 개의 값을 취하며, 첫 번째 값 (피제수)을 두 번째 값 (제수)으로 나눕니다.
나머지가 반환됩니다.
margin: rem(18px, 5px); /* returns 3px */
두 함수의 차이점은 rem()는 항상 기호를 사용한다는 것입니다.
첫 번째 값이 양수이면 반환됩니다.
양수가 됩니다. mod() 함수는 제수의 기호를 사용합니다.
rem() 및 mod()에 대해 자세히 알아보기:
새로운 CSS 수학: rem() 및 mod(),
작성자: Dan Wilson