[CSS] 변수를 음수로 변환하는 방법

 

 

 

CSS 변수를 사용하면 여러 스타일 속성 값을 쉽게 재사용할 수 있어

유지보수가 편리하고 코드의 가독성도 향상됩니다.

 

종종 CSS 변수 값을 음수로 변환해야 할 때가 있습니다.

 

예를 들어 아래 처럼 마진 값을 주었을 때, 

 

위 아래 마진이 40px이 되어 버리죠.

리액트나 next js 처럼 모듈이나 컴포넌트를 활용하는 경우, 

마진 병합이 일어나지 않게 되어 해결 방법으로 같은 변수를

음수로 적용하기로 했습니다. 

1. CSS 변수 정의

CSS 변수를 정의합니다. 공통 마진 20px 변수로 지정합니다.  

:root {
  --margin_20: 20px;
}

 

 

2. calc() 함수를 사용하여 변수 값을 음수로 변환하기

CSS에서 음수 값을 적용하려면 calc() 함수를 사용해야 합니다.

calc() 함수는 CSS 변수 값을 수학적으로 계산할 수 있도록 도와줍니다.

.element {
  margin-top: calc(var(--margin_20) * -1);
}

 

 

3. 적용하기

BoardWrap 클래스의 자식 요소들 중 두 번째 div부터 마지막 div에 음수 margin-top을 적용합니다.

첫번째를 제외한 나머지 자식요소들의 margin-top 에 음수를 줍니다. 

:root {
  --margin_20: 20px;
}

.BoardWrap > div:nth-child(n+2) {
  margin-top: calc(var(--margin_20) * -1);
}

 

 

변수나 calc() 함수를 활용하면 더욱 유연한 스타일링이 가능합니다.

또한, :nth-child 선택자를 사용하여 특정 요소에만 선택적으로 스타일을 적용해 봤습니다!