abs()

구문

/* property: abs(expression) */
width: abs(20% - 100px);

매개변수

abs(x) 함수는 매개변수로 오직 하나의 값을 취합니다.

x

숫자로 계산되는 식입니다.

반환 값

x 의 절댓값입니다.

• 만일 x 의 값이 양수이거나 0⁺ 이라면 x 를 반환합니다.
• 그렇지 않으면 -1 * x 를 반환합니다.

형식 구문

<abs()> = 
  abs( <calc-sum> )  

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<calc-product> = 
  <calc-value> [ [ '*' | / ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN        

예제

양수 변수

abs() 함수는 값이 항상 양수일 것이라고 보장할 수 있습니다. 아래 예제는 CSS 커스텀 속성인 --font-size 가 font-size 의 값으로 사용됩니다. 커스텀 속성을 abs() 함수로 감싸면 음수는 양수로 반환됩니다.

h1 {
  font-size: abs(var(--font-size));
}

그라디언트 각도의 방향 제어하기

그라디언트의 방향 또한 abs() 함수를 이용하여 제어할 수 있습니다. 아래는 -45deg에 해당하는 각을 가진 그라디언트가 빨간색에서 파란색으로 변화하는 예제입니다. abs() 를 사용하여 값을 양수로 만들면 그라디언트는 파란색에서 빨간색으로 변화하게 됩니다.

div {
  --deg: -45deg;
  background-image: linear-gradient(abs(var(--deg)), blue, red);
}

이전 버전과 호환하기

CSS abs() 함수를 지원하지 않는 구형 브라우저에서는 CSS max() 함수를 이용하여 같은 결과를 도출할 수 있습니다. 다음 예제를 참고해 보세요.

p {
  line-height: max(var(--lh), -1 * var(--lh));
}

max() 함수를 사용하여 var(--lh) 와 -1 * var(--lh) 두 값 중 더 큰 양수를 반환합니다. --lh 가 양수든 음수이든 상관없이 계산 후 반환된 값은 항상 양수, 즉 절댓값이 됩니다.

명세서

브라우저 호환성

같이 보기

• sign()