CSS 변수 정의 – CSS 변수란 무엇이며 사용하는 방법에 대해

CSS 변수 정의 – CSS 변수란 무엇이며 사용하는 방법에 대해

 

CSS 변수는 스타일시트 전체에서 만들고 재사용할 수 있는 사용자 정의 변수입니다.

이 기사에서는 CSS 변수를 생성하는 방법을 보여줍니다. :root 가상 선택기를 사용하여 액세스하는 방법을 보여줍니다. var() 기능.

CSS 사용자 정의 변수를 만드는 방법

다음은 사용자 정의 CSS 변수를 정의하기 위한 기본 구문입니다.

--css-variable-name: css property value;

스타일시트 상단에 모든 변수를 정의하는 것이 가장 좋습니다. 더 큰 프로젝트의 경우 다른 스타일시트에서 재사용할 수 있도록 사용자 정의 색상 변수에 대해서만 별도의 파일을 만드는 것이 일반적입니다.

해당 변수에 액세스하려면 다음을 사용합니다. var() 기능. 다음은 기본 구문입니다.

css property: var(--css-variable-name);

이 예에서는 스타일시트 전체에서 재사용할 수 있는 사용자 정의 배경 및 텍스트 색상 변수를 만들고 싶습니다. 이 변수의 이름을 지정하겠습니다. --main-bg-color 그리고 --main-text-color.

 --main-bg-color: #000080;
 --main-text-color: #fff;

이 변수들을 내부에 배치할 것입니다. :root 내 HTML 문서의 루트 요소를 나타내는 의사 선택기.

:root {
 --main-bg-color: #000080;
 --main-text-color: #fff;
}

내 body 선택기를 사용하여 해당 변수를 참조하겠습니다. var() 기능.

body {
 background-color: var(--main-bg-color);
 color: var(--main-text-color);
}

다음은 작업 예입니다.

페이지에 더 많은 콘텐츠를 추가하고 싶다면 스타일시트의 나머지 부분에서 해당 변수를 재사용하고 다음과 같이 불필요한 반복을 피할 수 있습니다.

.example-class-1 {
 background-color: #000080;
 display: flex;
 flex-direction: column;
}
.example-class-2 {
 font-size: 2.1rem;
 color: #fff;
}
.example-class-3 {
 background-color: #000080;
 color: #fff;
 border: 2px solid black;
}

이 두 번째 예에서는 페이지에 6개의 빨간색, 녹색 및 파란색 상자가 있습니다. 먼저 상자에 대한 HTML 마크업을 만들었습니다.

Box 1

Box 2

Box 3

Box 4

Box 5

Box 6

그런 다음 사용자 지정 빨강, 녹색 및 파랑 변수 집합을 만들었습니다.

:root {
 --maroon-red: #800000;
 --dark-green: #013220;
 --navy-blue: #000080;
 --white: #fff;
}

마지막으로 다음을 사용하여 해당 변수를 내 상자에 적용했습니다. var() 기능.

.red-box {
 background-color: var(--maroon-red);
}
.green-box {
 background-color: var(--dark-green);
}
.blue-box {
 background-color: var(--navy-blue);
}

전체 코드와 최종 결과는 다음과 같습니다.

CSS 변수의 이름을 지정하는 방법

변수 이름 지정과 관련하여 다른 개발자가 해당 변수가 무엇인지 알 수 있도록 설명이 포함된 짧은 이름을 선택하려고 합니다.

다음은 잘못된 변수 이름의 예입니다.

 background-color:var(--color);

뭐가 --color?

약간 붉은빛이 돌죠? 녹색? 파란색? 다른 것?

기본 배경색입니까 아니면 기본 텍스트 색상입니까?

다른 개발자가 돌아가서 CSS 정의가 무엇인지 파악하기 위해 살펴봐야 하는 것을 원하지 않습니다.

또 다른 예는 다양한 색상 음영에 대한 사용자 정의 CSS 변수를 생성하는 경우 다음과 같이 이름을 지정할 수 있습니다.

:root {
 --maroon-red: #800000;
 --light-red: #ff0000;
 --crimson-red: #e32636;
}

모든 개발자는 변수 이름을 지정하는 고유한 방법이 있습니다. 기억해야 할 중요한 점은 변수에 설명이 포함된 이름을 제공하는 것입니다.

결론

CSS 변수는 스타일시트 전체에서 만들고 재사용할 수 있는 사용자 정의 변수입니다.

다음은 사용자 정의 CSS 변수를 정의하기 위한 기본 구문입니다.

--css-variable-name: css property value;

해당 변수에 액세스하려면 다음을 사용합니다. var() 기능. 다음은 기본 구문입니다.

css property: var(--css-variable-name);

모든 개발자는 변수 이름을 지정하는 고유한 방법이 있지만 설명이 포함된 짧은 이름을 만드는 것이 가장 좋습니다.

이 기사가 도움이 되었기를 바라며 CSS 여정에서 행운을 빕니다.