
홈페이지를 만들다보면 공통적으로 적용되는 스타일들이 있다.
이럴 때 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에서 지정한 색상으로 불러온다.
참고
MDN Web Docs - 사용자 지정 CSS 속성 사용하기