[CSS] custom properties (variables)

1. 문제 정의

- FrontMento 과제를 하는 중, class 마다 폰트의 색상을 변경해야 했다.

- 처음에는 class 마다 color를 지정해 주고 주석으로 컬러명을 표기했었는데,

나중에는 컬러값과 색상을 매치하는 것이 헷갈리게 되었고,

: root 에 속성을 정의하여 HTML 문서 전체에 적용할 수 있는 방법을 찾게 되었다. 

2. 사용자 지정 속성(custom properties)이란 

1) 정의와 특징

- custom properties는 특정한 값을 포함하여 사용자에 의해 정의되는 엔티티이다.

- 코드의 재사용성을 높혀주고, 유지보수에 용이하다.

- 특정 값(px, rgba, hsl)을 적용하는 것보다 의미를 이해할 수 있게 해 준다. (--main-bg-color: white;)

- 미디어퀴리를 적용할 때, 사용자 지정 속성의 배율로 지정하면 되므로 편리하다.

- 사용자 지정 속성은 상속되므로, 특정 클래스의 값을 지정하지 않았을때는 부모 class의 사용자 지정값을 사용한다.

2) CSS 사용자 지정 속성 사용하기

- 기본적은 사용법은 하이픈 2개를 사용하여(--) 속성을 정의해준다.

 

element {
  --main-font-color: brown;
}

 

- 또한, 흔하게 사용하는 방법은 문서 전체에 적용할 수 있도록 root 클래스에 정의하는 방법이다.

 

:root {
  --main-font-color: brown;
}

 

- var( ) 함수를 사용하여 사용자 지정 속성을 사용한다.

 

element {
  background-color: var(--main-font-color);
}

3. 코드에 적용하기

- 기존에 작성한 코드로 태그, 클래스마다 필요한 색상 속성을 지정해 주었었다.

 

body {
  background-color: hsl(225, 100%, 94%); /*Pale blue*/
}

.title {
  color: hsl(223, 47%, 23%); /*Dark blue*/
}

.summary {
  color: hsl(224, 23%, 55%); /*Desaturated blue*/
}

.item {
  background-color: hsl(225, 100%, 98%); /*Very pale blue*/
}

.plan #plan-name {
  color: hsl(223, 47%, 23%); /*Dark blue*/
}

.plan #plan-cost {
  color: hsl(224, 23%, 55%); /*Desaturated blue*/
}

 

- 사용자 지정 속성 적용하기

 

:root {
  --Pale-blue: hsl(225, 100%, 94%);
  --Dark-blue: hsl(223, 47%, 23%);
  --Desaturated-blue: hsl(224, 23%, 55%);
  --Very-pale-blue: hsl(225, 100%, 98%);
}

body {
  background-color: val(--Pale-blue);
}

.title {
  color: val(--Dark-blue);
}

.summary {
  color: val(--Desaturated-blue);
}

.item {
  background-color: val(--Very-pale-blue);
}

.plan #plan-name {
  color: val(--Dark-blue);
}

.plan #plan-cost {
  color: val(--Desaturated-blue);
}

 

---

참고  MDN