CSS 변수로 사이트 테마를 설정하는 방법

Feb 2, 2026

어떻게

CSS 변수로 일반적으로 일반적으로 알려진 CSS 사용자 정의 속성은 현재 모든 주요 현대 브라우저에서 지원됩니다. 즉, Internet Explorer와 같은 레거시 브라우저를 지원 해야하는 프로젝트의 경우, CSS 변수는 모든 의도와 목적을 위해 안전한 모든 의도와 목적을 고려할 수 있음을 의미합니다.

많은 개발자가 이미 SASS와 같은 전 처리기를 사용하여 변수를 사용합니다. 적게 코드 반복을 줄이는 수단으로 네이티브 CSS 변수는 동일한 방식으로 작동하지만 추가적인 빌드 단계가 필요하지는 않지만 일반 CSS 속성과 같은 캐스케이드는 런타임에 제공됩니다. (사이트를 원활하게 실행하려면 오른쪽을 선택했는지 확인하십시오. 웹 호스팅 서비스.)

Sass 란 무엇입니까?

이러한 이점은 네이티브 CSS 변수가 전 처리기 형제에 대한 가장자리를 제공하고 개발자가 많은 코드를 사용하여 많은 흥미로운 것을 수행 할 수있는 문을 엽니 다. 사이트에 대한 제로 코드 옵션에 관심이 있습니까? 여기에 우리 가이드가 있습니다 웹 사이트 빌더 ...에

이 튜토리얼에서는 CSS 변수를 사용하여 웹 사이트 테마를 NoteApp라는 모의 웹 응용 프로그램에 구현하는 방법을 탐색 할 것입니다. 이것은 글쓰기가 필요합니다 CSS. 과 자바 스크립트 사용자가 색 구성표를 변경하고 표시된 열의 양을 토글 할 수있게합니다. 그런 다음 웹 스토리지 API를 활용하여 향후 세션을 위해 변경 사항이 저장되는지 확인합니다.

자습서 파일을 가져옵니다

먼저 먼저 프로젝트 파일을 다운로드하십시오 웹 디자이너의 파일로 (문제 264). 참고 : 처음 사용자는 파일을 사용하도록 등록해야합니다.

01. 작업 공간을 설정하십시오

그 / 웹 사이트 템플릿 Directory CSS 변수와 웹 스토리지 API를 사용하여 웹 사이트 테마를 구현할 정적 NoteApp 웹 페이지를 찾을 수 있습니다. 원하는 텍스트 편집기에서 디렉토리를 엽니 다.

02. 우리의 CSS 변수를 설정하십시오

에 main.css. 또한 프로젝트의 CSS의 대부분을 찾을 수 있습니다. 상단에서 대상을 대상으로하는 블록을 만듭니다 뿌리 의사 - 수업. 이내에서는 아래의 스 니펫과 같은 변수를 정의합니다. 이 루트 블록에는 일반 CSS 속성과 같은 스타일 시트를 통해 캐스케이드 할 전역 변수가 들어 있습니다.

 : 루트 {
  - 프리미터 : # 2F353E;
  - 제시 : # 2B9BCA;
  --tiary : # F3583F;
  - quaternary : # e0e1e2;
  - 구원 : #ffffff;
}

03. 변수로 색상을 교체하십시오

수동으로 또는 찾기 / 교체를 사용하여 스타일 시트를 사용하고 루트 블록에서 해당 변수로 모든 정적 컬러 16 진수 코드를 교환합니다. 이렇게하려면 다음을 사용하십시오 var. 변수의 이름을 함수하고 전달하십시오. 이렇게하면 브라우저가 변수의 값을 참조하도록 지시합니다. 예 :

 .C 헤더 {
  배경색 : var (- 1 차);
  색상 : var (- quinary);
}

04. 아이콘에 대한 인라인 SVG를 찾습니다

열다 index.html. 그리고 당신이 알아 차리는 첫 번째 것 중 하나는 큰 svg 요소입니다. 여기에는 모든 페이지의 아이콘의 경로가 있으며, 각각은 심볼 요소에 묶여 고유 한 ID를 제공합니다. 이 기호는 다음과 같은 경우에 참조됩니다 사용하다 요소는 SVG 코드의 중복없이 아이콘 재사용을 허용합니다.

05. SVG에 CSS 변수를 추가합니다

.svg 파일 대신 인라인 SVG를 사용하는 한 가지 이점은 CSS가 내부 구조에 액세스 할 수 있다는 것입니다. 이는 CSS 변수를 의미합니다 (브라우저 지원 확인 여기 짐마자 에 index.html. SVG의 스타일 블록을 아래의 스 니펫으로 바꿉니다. 이제 각 SVG의 색상은 CSS 변수의 값과 연결됩니다.

& lt; 스타일 & gt; .일 순위 { 채우기 : var (- - - - -primary, # 2F353E); } .중고등 학년 { 채우기 : var (-secondary, # 2B9BCA); } & lt; style & gt;

06. 열 변수를 만듭니다

색상 이외의 속성에 대해 CSS 변수를 사용할 수도 있습니다. 루트 블록에 새 변수를 만듭니다. 칼럼 및 값 3을 제공하십시오. 이는 기본값의 기본값과 일치해야합니다. 칼럼 페이지의 UI 구성 요소. 기능을 수행하면이 구성 요소가 열 수를 전환합니다.

 : 루트 {
  - 프리미터 : # 2F353E;
  - 제시 : # 2B9BCA;
  --tiary : # F3583F;
  - quaternary : # e0e1e2;
  - 구원 : #ffffff;
  - 컬럼 : 3;
}

07. 열을 구현합니다

새로운 열 변수와 그 새 열을 사용합니다 칼슘 () 기능, 이제 올바른 열 수를 만들려면 각 메모 구성 요소가 얼마나 넓은 지능을 계산합니다. 예를 들어 열이 4로 설정된 경우 각 메모에는 25 %의 폭이 있어야합니다.

 .C- 노트 {
  너비 : CALC (100 % / var (- columns));
}

08. JS 클래스 및 데이터 속성을 추가합니다

JS 동작을 DOM 요소에 적용 할 때 JS 접두사가있는 클래스를 통해 연결하십시오. 이는 CSS에서 요소의 기능적 측면을 분리합니다. A를 추가합시다 JS-UPDATE 변수 모든 색상 및 라디오 입력과의 클래스뿐만 아니라 데이터 속성 해당 변수를 실행하여 업데이트 할 수 있습니다.

& lt; 입력 유형 = "색상"값 = "# 2F353E" class = "JS-UPDATE 변수 U- 숨겨진 시각적으로" 데이터 변수 = "기본"& gt;

09. js를 추가하여 CSS 변수를 업데이트합니다

열다 main.js. 아래 스 니펫을 추가하십시오. 이 모든 것을 우리의 루프 JS-UPDATE 변수 논리를 입력하고 추가하므로 변경시 데이터 변수 속성에서 참조되는 변수는 입력 값으로 업데이트됩니다. 이제 컬러 견본과 열 토글이 작동해야합니다!

 VARTRIG = 문서
.querySelectorAll ( ". js-update-variable");
(var i = 0; i v vartrig.length; i ++) {
vartrig [i]
.addeventListener ( "변경", 함수 () {
document.documentElement.Style.
. SetProperty ( "-"+ this.Dataset.Variable,
이. 값);
});
}

10. JS 클래스를 저장 버튼에 첨부하십시오

저장 버튼을 클릭하면 사용자의 색 구성표 만 저장할 수있게 해주는 것이므로 현재 사정을 자동으로 재정의하지 않고 원하는만큼 주제를 실험 할 수 있습니다. 시작하려면 추가하십시오, .js-save.js ~로 저장 JS 후크로 작동하는 버튼.

& lt; 버튼 클래스 = "C-Button JS-Save-Colors" 데이터 - modal = "js-modal"데이터 - 모달 -Content = "JS-COLORY-modal-content"& gt; 저장 & lt; / button & gt;

11. 색상 배열 만들기

다시 main.js. 새 변수를 선언합니다 그림 물감 저장 버튼을 클릭하면 저장되도록 모든 색상 변수가 포함 된 모든 색상 변수가 포함 된 새 배열을 지정하십시오.

 var colors = [
  "일 순위",
  "중고등 학년",
  "제삼기",
  "네개 한 조인 것",
  "다섯 개의"
];

12. 빌드 저장 버튼 이벤트 리스너

색상 배열 아래에 클릭 이벤트 리스너를 만듭니다. JS-Save-Colors. 이전에 저장 버튼에 추가 된 클래스. 내부에서 새 변수를 만듭니다 htmlstyles. 루트 HTML 요소의 계산 된 속성을 할당합니다. 우리는 이것을 사용하여 CSS 변수에 액세스 할 것입니다.

 document.querySelector ( ". js-save-color")
.deventListener ( "클릭", 함수 () {
var htmlstyles = 창
.getComputedStyle (문서
.querySelector ( "HTML")),
}),

13. CSS 색상 변수를 기록하십시오

다음으로 이벤트 리스너 내에서 새 변수를 만듭니다. colourstoSave. 빈 객체를 할당합니다. 다음으로 A를 만듭니다 에 대한 루프를 사용하십시오 그림 물감 11 단계의 배열. 이내에서는 언급 한 변수의 전체 키 / 값 레코드를 추가합니다. 그림 물감 그 배열 colourstoSave. 목적.

 배열은 'ColourStosave'객체로 배열합니다.
ColourstoSave = 새로운 물체;
용 (var i = 0; i & lt; colours.length; i ++) {
ColourstoSave [Colors [i]] = htmlstyles.
.getPropertyValue ( "-"+ 색상 [i]);
}

14. ColourstoSave를 LocalStorage에 보내십시오

이제 우리는 모든 색상 변수가 저장되었습니다 colourstoSave. 또한 LocalStorage라는 웹 저장소 API의 구성 요소로 보내 드리겠습니다. 이것은 본질적으로 세션에서 지속되는 객체입니다. 우리는 그 안에 다른 물건을 저장할 수 있습니다 SetItem () 방법. 그것을 보내자 colourstoSave. 목적.

 LocalStorage.setItem ( "Colors",
JSON.Stringify (ColourstoSave));

15. JS 클래스를 열에 추가하십시오

색상 외에도 우리는 선택한 열 번호가 세션에서도 유지되는지 확인하고자합니다. 이것에 대한 첫 번째 단계는 추가하는 것입니다 JS-update 열 열 구성 요소 내의 모든 라디오 입력에.

& lt; 입력 유형 = "라디오"이름 = "열"클래스 = "JS-UPDATE 변수 JS-UPDATE 열 u- 숨겨진 시각적으로 "값 ="1 " 데이터 변수 = "열"& gt;

16. LocalStorage에 열을 보내십시오

각각 JS-update 열 다음은 변경 사항을 보려면 이벤트 리스너를 할당 할 것입니다. 탐지시 현재 값을 보냅니다. 칼럼 변수 LocalStorage. , 다시 그것을 사용하십시오 SetItem () 방법. 색상과는 달리, 우리는 객체가 아닌 것처럼이 값을 쉽게 분열 할 필요가 없습니다.

 VAR COLINPUTS = 문서
.querySelectorAll ( ". JS-UPDATE 열");
for (var i = 0; I & lt; colinputs; i ++) {
Colinputs [i] .addeventlistener ( "변경",
함수 () {var htmlstyles = 윈도우
.getComputedStyle (문서
.querySelector ( "HTML"));
localstorage.setItem ( "열",
htmlstyles.getPropertyValue ( "- 열"));
});}

17. 새로운 세션을 처리하십시오

사용자가 이전에 색상 및 열 기본 설정을 선택한 후에 반환하면이 저장된 데이터가 CSS 변수로 되돌아 가도록 논리를 작성해야합니다. 첫 번째 단계는 A를 정의하는 것입니다 DomContentLoaded 이벤트 리스너, 그리고 An. 만약 명령문은 LocalStorage에서 저장된 데이터를 확인합니다. getItem () 방법.

 document.addeventListener.
( "DOMContentLoaded", 함수 () {
if (localstorage.getItem ( "Colors")) {
}
if (localstorage.getItem ( "columns")) {
}
});

18. 색상 변수를 개정합니다

색상으로 만약 문, 새 변수를 만듭니다 SavedColours. 파싱 된 색상 객체의 값을 할당합니다. LocalStorage. ...에 A.를 사용하여 에서 루프와 함께 SavedColours. 각 색상 키 / 값 쌍을 잡고 루트 HTML 요소에 CSS 변수로 추가하십시오.

 var savedcolours = json.parse.
(LocalStorage.GetItem ( "Colors"));
for (savedcolours의 색상) {
document.documentElement.Style.setProperty.
( "-"+ 색상, SavedColours [color]); }

19. 열 변수 데이터를 수집합니다

열 변수를 수정하기 전에 저장된 데이터에 대한 참조를 먼저 가져와야합니다. LocalStorage. 또한 그 내부의 무선 입력 칼럼 구성 요소. 후자는 올바른 숫자가 미리 선택되어 있는지 확인하기 위해 상태를 업데이트 할 수 있습니다.

 var 열 = LocalStorage
.getItem ( "columns"),
columntriggers = 문서.
QuerySelectorAll ( ". JS-UPDATE 열");

20. 가변 및 상태를 수정합니다

마지막으로, C 럼 CSS 변수를 저장된 C 럼 CSS 변수를 업데이트합니다. LocalStorage. 대응하고 관련 무선 입력의 검사 된 속성을 칼럼 구성 요소가 true입니다. 그만큼 열 - 1. 칼럼이 사실을 보상하는 것입니다 노드리스트 0 기반입니다.

 document.documentElement.Style.
. setProperty ( "- 열", 열);
killtriggers [columns - 1] .checked = true;

21. 완제품을 테스트하십시오

NoteApp page — 완제품 : Mock NoteApp 페이지의 모든 것이 이제 작동해야합니다.

그게 다야! 모의 NoteApp 페이지의 모든 것이 이제 작동해야합니다. 견본을 클릭하여 자신만의 색 구성표를 만들고 LocalStorage. 저장 버튼을 통해. 표시된 열의 양을 전환하려면 열 구성 요소에서 해당 번호를 클릭하십시오.

그리고 기억하십시오, 그것은 항상 당신을 업그레이드 할 가치가 있습니다 클라우드 스토리지 새 프로젝트보다 앞서 던지는 파일을 처리 할 수 있습니다.

이 기사는 원래 웹 디자이너 잡지 문제 264에 출연했습니다. 여기를 구독하십시오 ...에

자세히보기 :

15 정말 유용한 반응 형 웹 디자인 자습서
Sass를 시작하는 방법
웹에서 더 좋은 색상을 관리하기위한 7 가지 팁

CSS 변수로 사이트 테마를 설정하는 방법

01. 작업 공간을 설정하십시오

02. 우리의 CSS 변수를 설정하십시오

03. 변수로 색상을 교체하십시오

04. 아이콘에 대한 인라인 SVG를 찾습니다

05. SVG에 CSS 변수를 추가합니다

06. 열 변수를 만듭니다

07. 열을 구현합니다

08. JS 클래스 및 데이터 속성을 추가합니다

09. js를 추가하여 CSS 변수를 업데이트합니다

10. JS 클래스를 저장 버튼에 첨부하십시오

11. 색상 배열 만들기

12. 빌드 저장 버튼 이벤트 리스너

13. CSS 색상 변수를 기록하십시오

14. ColourstoSave를 LocalStorage에 보내십시오

15. JS 클래스를 열에 추가하십시오

16. LocalStorage에 열을 보내십시오

17. 새로운 세션을 처리하십시오

18. 색상 변수를 개정합니다

19. 열 변수 데이터를 수집합니다

20. 가변 및 상태를 수정합니다

21. 완제품을 테스트하십시오

어떻게 - 가장 인기있는 기사

CSS로 SVG에 애니메이션을 추가하는 방법

Gatsby와 블로깅 사이트를 만드는 방법

14 Zbrush 워크 플로우 팁

수량 특정 CSS 스타일 및 레이아웃 생성

Pixijs로 리플 효과 생성

비디오 게임을위한 놀이 가능한 아바타 디자인

3ds Max에서 하드 표면 모델링을 선명하게

클립 스튜디오 페인트에서 사용자 정의 브러시 만들기

카테고리