여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. CSS - 변수
CSS – 변수
2년전 작성
2년전 수정

홈페이지를 만들다보면 공통적으로 적용되는 스타일들이 있다.

이럴 때 CSS에도 변수를 사용할 수 있다.

나는 공통적으로 적용되고 + CSS 파일에서 수정을 편하게 하기위해 변수를 사용 한다.

변수

CSS에서 변수를 어떻게 선언하고 어떻게 사용하는지 방법에 대해 알아보자.

변수 선언

요소에 변수를 선언할 수 있지만, 주로 :root에 변수 선언하여 각 요소별로 변수를 불러와서 사용한다.

CSS에서 변수 선언할 때에는 –를 앞에 붙인 후 변수 이름을 지정한다.
또한 변수 이름에 대,소문자 구분하기때문에 대문자와 소문자가 같은 문자를 표시해준다고 하더라도 다른 변수로 인식한다.

CSS
:root {
--light-mode-bg-color: #FFFFFF;
--light-mode-text-color: #000000;
--dark-mode-bg-color: #000000;
--dark-mode-text-color: #FFFFFF;
}

이런식으로 라이트모드 배경색상, 글자 색상, 다크모드 배경색성, 글자색상을 변수로 선언할 수 있다.

변수 사용

CSS
@media (prefers-color-scheme: light) {
background-color: var(--light-mode-bg-color, #FFFFFF);
color: var(--light-mode-text-color);
}

@media (prefers-color-scheme: dark) {
background-color: var(--dark-mode-bg-color, #000000);
color: var(--dark-mode-text-color);
}
사용된 코드 설명
background-color: var(–light-mode-bg-color, #FFFFFF);
:
라이트 모드의 배경 색상을 변수 –light-mode-bg-color에서 지정한 색상으로 불러오고 없다면 #FFFFFF로 지정한다. 변수 지정 안된경우 코드는 선택 사항이다.
color: var(–light-mode-text-color);
:
라이트 모드 글자 색상을 변수 –light-mode-text-color에서 지정한 색상으로 불러온다.
background-color: var(–dark-mode-bg-color, #000000);
:
다크 모드의 배경 색상을 변수 –dark-mode-bg-color에서 지정한 색상으로 불러오고 없다면 #000000로 지정한다. 변수 지정 안된경우 코드는 선택 사항이다.
color: var(–light-mode-text-color);
:
다크 모드 글자 색상을 변수 –light-mode-text-color에서 지정한 색상으로 불러온다.
참고

Mingg`s Diary
밍구
공부 목적 블로그