[CSS] CSS 변수 사용

CSS

IT공부블로그 2021. 7. 2. 17:30

728x90

사용자 지정 CSS 속성 사용하기 (변수) - CSS: Cascading Style Sheets | MDN

사용자 지정 속성(CSS 변수, 종속 변수)은 CSS 저작자가 정의하는 개체로, 문서 전반적으로 재사용할 임의의 값을 담습니다. 사용자 지정 속성은 전용 표기법을 사용해 정의하고, (--main-color: black;)

developer.mozilla.org

사용방법은 사용자 지정속성을 표시하는 : 을 앞에 붙여서 사용 가능

:root{
	--base: yellow;
    --spacing: 10px;
    --blur: 10;
}

선언한 변수에 --로 다 시작되는데 왜 -- 로 시작되는지는 정확하게 모름

아시는분 알려주세요

위 변수들을 사용하려면 아래처럼 사용

.test {
	width: var(--spacing)
}

위 처럼 사용가능

변수들의 값을 업데이트시 아래 코드 사용

document.documentElement.style.setProperty('변수명', '변경할값');

위 코드의 기준은 :root일때

document.documentElement가 루트요소의 element를 가져옴

Document.documentElement - Web API | MDN

Document.documentElement 읽기 전용 속성은 문서의 루트 요소를 나타내는 Element를 반환합니다. HTML 문서를 예로 들면 요소를 반환합니다.

developer.mozilla.org

루트요소 가져와서 스타일에 넣어주면됨

:root 아닐떄는 그냥 getElementById 같은걸로 찾아서 넣어주면 됨

728x90