HTML,CSS (custom property)

custom property

커스텀 속성(custom property)은 개발자가 정의한 속성의 집합입니다.

개발자는 임의로 정한 이름의 속성에 임의의 값을 할당할수 있습니다.

임의로 정한 이름에 임의의 값을 할당한다.. 많이 익숙한 것 같습니다.

맞습니다. 변수의 사용과 유사합니다.
(임의의 이름은 변수명, 임의의 값은 변수의 값으로 생각할 수 있습니다.)

즉 custom property는 CSS에서 변수를 사용할 수 있도록 만든 방법이라 생각하면 쉽습니다.

root{}

custom property를 설명하기 전에 root{}라는 개념을 알고 가야합니다.

root{} 란 문서 트리에서 가장 상위 요소를 의미합니다.

따라서 모든 CSS 파일에 적용할 CSS변수는 :root{}내부에 정의해야 합니다.

사용 방법은 매우 간단합니다.

임의의 CSS파일(어떤곳이든)에 :root{ }를 사용하면 됩니다.

custom property 사용법

앞서 custom property는 root{} 내부에 정의해야한다는 것을 배웠습니다.

이번엔 어떤식으로 정의하여 사용해야하는지 배워보겠습니다.

:root{
	--name : value;
}

기본적인 구조는 예제처럼 구현됩니다.

• --name : 커스텀 속성의 이름은 --로 시작되며 name은 사용자가 임의로 정의합니다.

• value : 커스텀 속성의 값은 css의 모든 속성 값(#24545a, flex, 10rem ...)이 들어갈 수 있습니다.

---

이제는 이렇게 :root{}에 구현한 custom property를 사용하는 방법을 알아보겠습니다.

:root{
  --yellow : #fae100;
}

.class-name{
	color : var(--yellow) tomato;
}

color : var(--yellow) tomato는 만약 root에서 --yellow가 정의되지 않았을 경우 tomato 색상을 정의하라는 의미로 예비속성을 주는 방법입니다.

custom property를 사용하는 이유

1. 중복된 height, width, margin.. 등의 값에 이름을 정의하여 알아보기 쉽게할 수 있고, 한번에 변경 가능하여 유지보수에 이점이 있습니다.

2. 예제처럼 #fae100 같은 색상에 이름을 부여하므로서 더 가독성과 일관성을 높힐 수 있습니다.