CSS 사용자 지정 속성

CSS 사용자 지정 속성이란?

웹페이지를 만들다보면 CSS 내에서 반복적으로 사용되는 스타일 속성이 생겨난다. 그럴때마다 Class에 속성을 적용하는 것은 번거롭고 코드도 길어진다.

그런 것을 방지하기 위해서 CSS 코드 안에서 변수처럼 값을 저장해두고 필요할 때마다 불러서 사용할 수 있게 해주는 기능을 사용하는데 그게 바로 CSS 사용자 지정 속성이다.

 

정의 및 사용

• 사용자 지정 속성은 --로 시작하는 이름을 사용하여 정의한다.
  • 예를 들어 --main-color: blue;와 같이 정의할 수 있다.
• 정의된 속성 값은 var() 함수를 사용하여 불러와 적용할 수 있다.
  • 예를 들어 color: var(--main-color);와 같이 사용할 수 있다.

범위(Scope)

• 사용자 지정 속성은 정의된 요소와 그 하위 요소에서 사용할 수 있다.
• :root에 정의된 속성은 문서 전체에서 사용할 수 있어 전역 변수처럼 활용할 수 있다.

대체 값(Fallback Values)

• var() 함수의 두 번째 인수로 대체 값을 지정할 수 있다. 이는 속성이 정의되지 않았을 경우 적용될 값을 설정하는 것이다.
• 예를 들어 color: var(--text-color, black);은 --text-color가 정의되지 않았을 경우 검은색(black)을 사용한다.

활용 예시

• 색상 테마:
  • :root { --primary-color: #007bff; --secondary-color: #6c757d; }
  • button { background-color: var(--primary-color); }
• 간격 및 크기:
  • :root { --spacing-large: 2rem; --font-size-heading: 2.5rem; }
  • h1 { font-size: var(--font-size-heading); }