[css] 변수를 음수로 지정하고 싶을 때

 

 

 

 

CSS 변수를 사용하여 음수 값을 불러오는 방법은 변수에 -100px를 저장하는 대신 100px를 저장한 다음, 해당 변수를 사용할 때 음수 부호(-)를 붙여서 사용하는 것이다. 

 

예를 들어, --headerHeight 변수를 사용하여 음수 값을 적용하려면 다음과 같이 작성할 수 있다.

 

 

:root {
  --headerHeight: 100px;
}

.selector {
  height: calc(var(--headerHeight) * -1);
}

 

 

위의 예제에서는 calc() 함수를 사용하여 변수에 -1을 곱한 값을 적용한다.

이렇게 하면 --headerHeight 변수에 저장된 값인 100px에 -1을 곱한 결과로 -100px가 적용된다.

결과적으로 .selector 요소의 높이(height)에 -100px가 적용된다.

 

 

 

 

 

주의해야 할 점은 음수 값을 사용할 때 calc() 함수를 사용하는 것이다.

CSS에서는 변수에 음수 값을 직접 저장하는 것을 허용하지 않는다. 따라서 계산식을 사용하여 음수 값을 변수에 적용해야 한다.