CSS 변수를 사용하여 음수 값을 불러오는 방법은 변수에 -100px를 저장하는 대신 100px를 저장한 다음, 해당 변수를 사용할 때 음수 부호(-)를 붙여서 사용하는 것이다.
예를 들어, --headerHeight 변수를 사용하여 음수 값을 적용하려면 다음과 같이 작성할 수 있다.
:root {
--headerHeight: 100px;
}
.selector {
height: calc(var(--headerHeight) * -1);
}
위의 예제에서는 calc() 함수를 사용하여 변수에 -1을 곱한 값을 적용한다.
이렇게 하면 --headerHeight 변수에 저장된 값인 100px에 -1을 곱한 결과로 -100px가 적용된다.
결과적으로 .selector 요소의 높이(height)에 -100px가 적용된다.
주의해야 할 점은 음수 값을 사용할 때 calc() 함수를 사용하는 것이다.
CSS에서는 변수에 음수 값을 직접 저장하는 것을 허용하지 않는다. 따라서 계산식을 사용하여 음수 값을 변수에 적용해야 한다.
728x90
반응형
'Web > Styles' 카테고리의 다른 글
[CSS] :is(), :where() 알아보기 (0) | 2024.07.01 |
---|---|
[CSS] 뒤가 투명한 png 이미지 하얗게 변환 (0) | 2023.05.31 |
[CSS] aspect ratio (0) | 2023.04.10 |
[scss] BEM 방식으로 깊은 중첩 하기 (0) | 2023.01.18 |
[CSS 방법론] BEM 방식 (0) | 2022.11.28 |