[HTML/CSS] :root를 통해 CSS에서 변수를 사용해 보자 : 가상 클래스의 활용

CSS를 통해 디자인을 하는 과정에서 페이지의 통일성을 위해 하나의 값을 여러 번 활용하는 경우가 많다. 이러한 경우 :root 가상 클래스를 활용하여 변수를 생성함으로써 코드의 유지·보수나 추가적인 확장을 쉽게 할 수 있다. 아래의 예시를 보자.

See the Pen Untitled by me_in_sk (@sleepyMS) on CodePen.

:root 변수의 선언

변수의 이름 앞에는 --(하이픈 2개)를 붙여준다.

:root {
  --width: 200px;
  --height: 100px;
  --box-color: #a6a5ff;
  --box-font-weight: bold;
  --box-font-size: 20px;
}

:root 변수의 적용

var() 함수를 통해 괄호 안에 적용할 변수를 입력한다.

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

:root 변수의 활용

calc() 함수를 통해 변수를 계산식에 사용할 수 있다.

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

:root를 통해 변수를 통제한다면 코드의 보수 과정에서 일일이 값을 수정할 필요가 없으며, calc() 함수를 통해 특정 변수를 기준으로써 활용할 수도 있다. calc() 함수에 대해 궁금하다면 아래의 링크를 통해 학습하길 추천하며, 이번 포스팅은 여기서 마친다.

◆ 함께 보면 좋은 글

저작자표시 비영리 변경금지

[React] map() 함수를 사용한 리스트 렌더링 : key 속성으로 반복되는 컴포넌트를 만들어 보자 (0)	2024.05.18
[HTML/CSS/JS] React를 통해 useState()를 사용해 보자 : 상태를 업데이트 해보자 (0)	2023.08.13
[HTML/CSS] cubic-bezier()를 통해 속성 변화를 조절해 보자 : 변화에 변화를 주자 (0)	2023.06.23
[HTML/CSS] calc()를 통해 속성값을 계산해 보자 : 사칙연산을 통한 속성값 계산 (0)	2023.06.21
[HTML/CSS/JS] GSAP로 애니메이션을 만들어 보자 : 문장 애니메이션 효과 만들기 (0)	2023.06.14

내 코딩 여정