[CSS] :root 가상 클래스로 변수 지정하기

 

안녕하세요. 오늘은 CSS에서 :root를 사용해서 변수 지정하는 방법을 알아보겠습니다.

 

혹시 밑에 사진처럼 CSS로 색상 지정 할 때 똑같은 값을 여러개 지정한적 있으신가요?

 

이런식으로 지정하면 값을 수정 할 때 일일이 수정 해야하기 때문에 너무 번거롭습니다.

변수를 선언해서 값을 지정하면 변수값만 수정하면 되기 때문에 훨씬 간단하게 수정이 가능합니다.

---

 

 

 

:root 변수 선언하기

 

 

변수 선언하는 방법은 간단합니다.

하이픈(--) 2개를 쓴 다음 변수 이름과 변수 값을 적으면 되는데요.

:root {
	
	/* Color */
	--test-color: #ff0000;
	
	/* Size */
	--test-size: 10px;
	
}

 

위 코드처럼 색상뿐만 아니라 사이즈 값도 선언 할 수 있습니다.

---

 

 

 

 

:root 변수 사용하기

 

 

선언한 변수는 사용하고 싶은 클래스에 var(--변수명) 으로 사용 할 수 있습니다.

.test {
	background-color: var(--test-color);
}

.test1 {
	background-color: var(--test-color);
}

.test2 {
	background-color: var(--test-color);
}

 

이런식으로 값을 지정하면 수정 할 때 훨씬 간편하게 수정 할 수 있습니다.

 

 

참고로 :root는 ie8 (인터넷 익스플로러)에선 적용이 되지 않습니다.

요즘은 ie8을 안쓰는 pc가 훨씬 많기 때문에 큰 문제는 되지 않을거 같습니다.

---

 

다음엔 더욱 유용한 내용으로 포스팅 하겠습니다.

 

읽어주셔서 감사합니다!