사용자 지정 CSS 속성(Custom Properties)

○ 사용자 지정 CSS속성(Custom Properties)

CSS 안에서 동일한 값을 반복해서 입력해야 하는 경우,
상수로 변수를 지정해서 입력하는 것이 좋다.

일일히 값을 입력하는 'hard coded' 방식은 수정 및 관리 측면에서 좋지 않다.

• 사용형태

Custom Properties는 CSS에서 '--이름' 형태로 변수를 정의해서 사용할 수 있다.

--background-color: beige;, --font-size: 10px;

위와 같은 형태로 표기해서 사용할 수 있다.

• 사용방법

지정한 변수의 값을 읽어올 때는 var(--선언값, @(기본값 설정)) 형태로 사용 할 수 있다.
@은 생략 가능

div1 {
	--background-color: beige;
    --font-size: 10px;
}
div2 {
	background-color: var(--background-color);
    font-size: var(--font-size);
}

위와 같은 형태로 사용할 수 있고 위의 결과 값은 아래와 같다.

div2 {
	background-color: beige;
    font-size: 10px;
}

지정한 변수의 값을 불러오기 위해서는 불러오고자 하는 태그가
선언된 태그의 자식 요소로 포함되어 있어야 한다.


그렇기 때문에 편의를 위해서 가장 상위 태그인 ':root'를 통해서
모든 요소에 적용을 하는 형식으로 사용한다.

학습기록의 내용은 드림코딩 사이트 엘리 강의를 바탕으로 정리했습니다.
출처 - https://academy.dream-coding.com/