CSS

[CSS] 사용자 지정 속성 var( ), 속성 값 계산 calc( )

spring92 2021. 5. 9. 22:29

CSS를 작성하다보면 특정 속성값을 여기저기서 반복해서 쓰는 경우가 있는데, 후에 이 속성값을 바꾸려면 이곳 저곳을 찾으면서 수정해야 하는 번거로운 과정을 거쳐야한다.

사용자 지정 속성을 사용하면 특정 속성값을 지정해놓고 필요한 영역에서 재사용할 수 있고, 수정 또한 속성값을 정해놓은 영역에서 한 번만 하면 되므로 간편하다.

 

box라는 클래스를 가진 div를 하나 생성하고

<body>
    <div class="box"></div>
</body>

:root라는 의사 클래스(pseudo-class)에 사용자 지정 속성의 이름과 그 값을 원하는대로 정해서 작성한 뒤

사용자 지정 속성을 사용할 곳에 var( )를 이용해서 작성하면

:root {
  --size-width: 50px;
  --size-height: 50px;
  --color-pink: #fd7f84;
  }

.box {
  width: var(--size-width);
  height: var(--size-height);
  background-color: var(--color-pink);
  }

아래와 같은 width: 50px, height: 50px의 도형이 출력된다.

 

추가로 calc( )를 사용해서 속성값을 계산해서 부여할 수 있다.

위의 CSS에서 width와 height의 속성값을 calc( )로 감싸 사칙연산을 작성하면

.box {
  width: calc(var(--size-width) * 3);
  height: calc(var(--size-height) / 2);
  background-color: var(--color-pink);
  }

계산한 값에 따라 width: 150px, height: 25px의 도형이 출력되는 것을 볼 수 있다.