CSS 변수란 무엇이며 어떻게 사용합니까?
게시 됨: 2022-02-16사이트의 CSS 코드를 작성할 때 CSS 사용자 정의 속성(변수)을 사용하여 개발 프로세스의 속도를 높일 수 있습니다. 변수를 사용하여 속성(크기, 색상)을 정의한 다음 여러 요소에 적용할 수 있습니다.
그렇게 하면 코드와 디자인을 더 잘 제어할 수 있습니다. 한 곳에서 변수 값을 변경하면 호출되는 모든 곳에서 해당 속성 값을 재정의합니다.
이 게시물은 CSS 변수와 몇 가지 실용적인 응용 프로그램을 사용하는 방법을 설명합니다.
시작하자!
변수 선언
변수는 전역 또는 지역 범위를 가질 수 있습니다. 변수를 전역적으로 정의하려면 :root 선택기를 사용합니다.
:root { --base-font-size: 1.1rem; } 팝업에서 열기
:root { --base-font-size: 1.1rem; }:root 선택자는 문서의 루트, 즉 우리의 경우 <html> 과 일치합니다.
CSS 사용자 정의 속성(변수)을 선언하려면 두 개의 대시(--)로 시작합니다. 변수는 대소문자를 구분합니다. 예를 들면 다음과 같습니다.
--base-font-size 및 --Base-Font-Size 는 서로 다른 두 변수입니다.
변수를 로컬로 정의하려면 변수를 사용하려는 요소의 선택기를 사용합니다.
#first-container { --background: #ccc; } 팝업에서 열기
#first-container { --background: #ccc; }변수를 정의했으면 호출해야 합니다.
var() 함수
var() 함수는 정의된 CSS 변수의 값을 삽입하는 데 사용됩니다. 함수는 자신을 변수 값으로 바꿉니다. 예를 살펴보겠습니다.
HTML 코드
- 이 코드를 복사 하여 코드 편집기에 붙여넣습니다.
- 파일을 index.html 로 저장 합니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/style.css"> <title>CSS Variables</title> </head> <body> <div class="wrapper"> <div class="container-1"> <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste doloribus dolorum eaque veritatis quia quod?</p> <button type="button">Click here!</button> </div> <div class="container-2"> <p class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, dolorem. Reprehenderit mollitia quos quia qui.</p> <button type="button">Click here!</button> </div> <div class="container-3"> <p class="third">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi dolor reprehenderit, ad sunt aperiam officiis!</p> <button type="button">Click here!</button> </div> </div> </body> </html> 팝업에서 열기
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/style.css"> <title>CSS Variables</title> </head> <body> <div class="wrapper"> <div class="container-1"> <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste doloribus dolorum eaque veritatis quia quod?</p> <button type="button">Click here!</button> </div> <div class="container-2"> <p class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, dolorem. Reprehenderit mollitia quos quia qui.</p> <button type="button">Click here!</button> </div> <div class="container-3"> <p class="third">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi dolor reprehenderit, ad sunt aperiam officiis!</p> <button type="button">Click here!</button> </div> </div> </body> </html> 
CSS 코드
- style.css 라는 파일을 만듭니다 ( index.html 의 동일한 디렉토리에 있음).
- 아래 코드를 붙여넣고 파일을 저장합니다.
/* Global styles */ .wrapper, div { padding: 1rem; } div { margin: 1rem auto; } /* DEFINITION OF VARIABLES */ :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); } /* VARIABLES */ /* Wrapper */ .wrapper { background-color: var(--light-grey); } /* First Container */ .container-1 { /* The var() function replaces itself with the value of the variable */ border: var(--border-primary); color: var(--primary); background-color: var(--white); } .container-2 { /* The var() function replaces itself with the value of the variable */ border: var(--border-success); color: var(--success); background-color: var(--white); } .container-3 { /* The var() function replaces itself with the value of the variable */ border: var(--border-warning); color: var(--warning); background-color: var(--white); } .container-1 button { background-color: var(--primary); color: var(--white); } .container-2 button { background-color: var(--success); color: var(--white); } .container-3 button { background-color: var(--warning); color: var(--white); }< button {
border-radius: 5px; } 팝업에서 열기
/* Global styles */ .wrapper, div { padding: 1rem; } div { margin: 1rem auto; } /* DEFINITION OF VARIABLES */ :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); } /* VARIABLES */ /* Wrapper */ .wrapper { background-color: var(--light-grey); } /* First Container */ .container-1 { /* The var() function replaces itself with the value of the variable */ border: var(--border-primary); color: var(--primary); background-color: var(--white); } .container-2 { /* The var() function replaces itself with the value of the variable */ border: var(--border-success); color: var(--success); background-color: var(--white); } .container-3 { /* The var() function replaces itself with the value of the variable */ border: var(--border-warning); color: var(--warning); background-color: var(--white); } .container-1 button { background-color: var(--primary); color: var(--white); } .container-2 button { background-color: var(--success); color: var(--white); } .container-3 button { background-color: var(--warning); color: var(--white); }< button {
border-radius: 5px; } 
여기서 주의할 사항이 있습니다.
- 색상 팔레트를 만드는 것은 간단한 과정입니다.
- 경계 변수 정의의 색상과 같이 다른 변수의 정의 내에서 변수를 사용할 수 있습니다.
- 변수는 상속되며 .container-* 요소의 color 속성은 직계 자식에 영향을 줍니다. 이 경우 <p> 요소입니다.
변수를 재정의하려면 컨테이너 내부에서 변수를 선언하여 보다 구체적으로 만듭니다.
- CSS 코드를 수정 합니다.
button { border-radius: 5px; /* Overriding a global variable */ --primary: #021b35; } 팝업에서 열기
button { border-radius: 5px; /* Overriding a global variable */ --primary: #021b35; } 
변수 및 미디어 쿼리
변수는 CSS 미디어 쿼리에서 상속 및 재정의될 수도 있습니다.
- 다음 코드를 변수에 추가 합니다.
:root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); /* Width of the wrapper 1000px / 90% on smaller devices */ --wrapper-width: 1000px; } 팝업에서 열기
:root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); /* Width of the wrapper 1000px / 90% on smaller devices */ --wrapper-width: 1000px; }래퍼 요소의 기본 너비를 정의했습니다. 이제 이러한 변수를 .wrapper 너비 속성에 적용할 수 있습니다.
- CSS 파일 끝에 다음 코드를 추가 합니다.
.wrapper { width: var(--wrapper-width);
margin: 0 auto; } 팝업에서 열기
.wrapper { width: var(--wrapper-width);
margin: 0 auto; } 
화면 너비가 1100px 미만인 장치에 대한 미디어 쿼리를 정의하기 위해 다음 미디어 쿼리를 작성합니다.
- CSS 코드를 수정 합니다.
@media screen and (max-width: 1100px) { .wrapper { --wrapper-width: 90%; } } 팝업에서 열기
@media screen and (max-width: 1100px) { .wrapper { --wrapper-width: 90%; } } 
미디어 쿼리 내의 새 변수 정의는 해당 값을 재정의합니다. 또한 변수는 DOM에서 사용할 수 있습니다. 즉, JS로 검색하고 조작할 수 있습니다. CSS 전처리기 내의 변수로는 불가능합니다.
요약
변수는 작거나 많은 양의 CSS를 구성하고 관리하는 데 유용합니다. 반복을 줄여 실수를 방지합니다. CSS 변수는 동적입니다. 즉, 런타임에서 변경할 수 있습니다. CSS 변수를 사용하여 사이트 또는 애플리케이션을 동적으로 테마화하는 것은 쉽습니다. 사용자 정의된 이름으로 CSS 속성에 값을 할당하는 기능을 제공합니다. 변수는 표준 계단식 규칙을 따르므로 다른 특정 수준에서 동일한 속성을 정의할 수 있습니다.
이 튜토리얼이 마음에 드셨기를 바랍니다. 읽어 주셔서 감사합니다!