[HTML/CSS] #4 CSS 변수 저장하고 사용하기 (색이나 폰트 값을 변수에 저장하고 사용하는 법)

---

CSS 변수 사용하기

• css도 다른 프로그래밍 언어처럼 변수를 선언하고 값을 저장하는 형태처럼 사용할 수 있음
• 자주 사용하는 색이나 폰트의 설정값을 편리하게 사용 가능
• 코드를 변경할 때도 변수 값만 바꾸면 되기에 유지보수에 유리

 

1. 변수 선언

--variable-name: value;

 

2. 변수 사용

property: var( --variable-name )

 

 

3. 예시

See the Pen Untitled by KwonRakhyun (@nack1400) on CodePen.

 

• 변수를 선언한 노드와 자식 노드들이 변수를 사용 가능함
• 그렇지만 보통은 root에 선언을 해서 전체가 사용 가능하도록 선언함