한 줄 요약
모든 요소가 같은 색상 변수를 바라보고 있으면, 변수 값 한 줄만 고쳐도 버튼, 링크, 배지까지 사이트 전체가 한 번에 바뀝니다.
비유로 이해하기
아파트 수도 본관 밸브를 떠올려 보세요. 밸브 하나를 잠그면 부엌, 욕실, 베란다 수도꼭지가 한꺼번에 멈춥니다. 수도꼭지마다 따로 잠글 필요가 없죠.
색상 변수는 이 본관 밸브입니다. 버튼, 링크, 배지, 테두리가 모두 var(--accent)라는 같은 관에 연결되어 있으면, --accent 값만 바꿔도 모든 곳의 색이 동시에 바뀝니다.
비교해 보기
- 직접 지정한 사이트: 브랜드 색을 바꾸려면 수십 개의 페이지와 블록을 하나하나 열어 고쳐야 합니다. 꼭 몇 군데는 빠뜨리게 되죠.
- 변수를 쓴 사이트: 팔레트에서 값 하나를 바꾸고 저장하면 끝입니다.
- 같은 원리로 밝은 화면과 어두운 화면(다크 모드)도 변수 값만 바꿔서 만들 수 있습니다.
직접 실행해 보기
--accent를 #2B59C3로, --accent-2를 #BFD3FF로 바꿔 보세요. 헤더 줄, 버튼, 링크, 배지가 한꺼번에 파랗게 바뀝니다. 그다음 맨 아래 다크 모드 주석(/*, */)을 지워 보세요.
GenerateBlocks에서는
GeneratePress에서는 사용자 정의하기의 색상 메뉴에서 전역 색상 값을 바꾸면, 그 색을 고른 GenerateBlocks 블록들이 모두 함께 바뀝니다. 단, 블록에서 팔레트 대신 #코드를 직접 입력한 곳은 연결이 끊겨 있어서 따라 바뀌지 않아요.
참고: MDN: Using CSS custom properties · web.dev: Custom properties · GeneratePress 3.1: Global Colors