CSS 커스텀 프로퍼티

1 개요[ | ]

CSS custom properties, CSS variables, cascading variables
CSS 커스텀 프로퍼티, CSS 변수

CSS에서 변수를 정의하고 사용할 수 있게 해주는 기능
변수명 앞에는 항상 --(하이픈 두 개)를 붙인다.
값을 참조할 때는 var() 함수를 사용한다.
주로 색상, 크기, 여백 등 반복되는 스타일 값을 관리하거나, 테마(라이트/다크 모드 등)를 쉽게 전환하기 위해 사용된다.

2 예시[ | ]

<html>
<style>
:root {
  --color-primary: #3b82f6;
  --color-bg: #f8fafc;
  --color-text: #111827;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
}

button {
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  cursor: pointer;
}
</style>
</head>
<body>
  <p>Hello World</p>
  <button>Button</button>
</body>
</html>

3 같이 보기[ | ]

4 참고[ | ]