글로벌 및 로컬 범위가 있는 CSS 변수

여러분, 안녕하세요!
정말 오랜만에 포스팅을 하네요. 저는 프론트엔드 개발자로 일하고 있는데 갑자기 많은 CSS 기본 사항을 잊어버렸다는 것을 깨달았습니다. 그래서 다시 한 번 배우기 시작했습니다.

이 블로그는 CSS 변수에 관한 것입니다.

여기에서 CSS 변수의 사용법과 프로젝트에서 변수를 사용하는 방법을 배웠습니다.

우선, CSS 변수 이름은 두 개의 대시--로 시작해야 하며 대소문자를 구분합니다.
예를 들어:

--blue: #1e90ff;
--red: rgb(255,0,0);

글로벌 및 로컬 범위

전역 CSS 변수 선언

CSS 변수는 전역 범위와 지역 범위를 가질 수 있습니다. 전역 범위에서 CSS 변수를 선언하면 전체 문서에서 액세스할 수 있습니다.

전역 범위의 변수를 만들려면 :root 선택기 내에서 변수를 선언해야 합니다. :root 선택기는 문서의 루트 요소와 일치합니다. 다음과 같이 전역 CSS 변수를 선언합니다.

root: {
    --blue: #1e90ff;
    --red: rgb(255, 0, 0);
    --white: #ffffff;
}

로컬 범위에서 CSS 변수 사용

로컬 범위로 변수를 생성하려면 변수를 사용할 선택기 내에서 선언해야 합니다.
var() 함수는 CSS 변수의 값을 삽입하는 데 사용됩니다. var() 함수의 구문은 다음과 같습니다.

var(name, value);

위에서 선언한 전역 변수를 다른 선택기 내에서 사용하려면 다음과 같이 작성해야 합니다.

body {
    background-color: var(--blue);
    color: var(--white);
}

button {
    background-color: var(--white);
    color: var(--red);
    border: 1px solid var(--red);
}

CSS 변수의 유용성

CSS 변수는 DOM에 액세스할 수 있으므로 글로벌 및 로컬 범위 모두에서 DOM을 생성할 수 있습니다.

JavaScript로 변경할 수 있습니다.

미디어 쿼리를 기반으로 변경할 수 있습니다.

CSS 변수를 사용하는 가장 좋은 방법은 디자인의 색상 속성을 변경하는 것입니다. 일부 변수를 선언하고 동일한 색상을 복사하여 붙여넣는 대신 반복해서 사용할 수 있습니다.

FreeCodeCamp 학습 프로젝트에서 CSS 변수를 사용하여 디자인 색상을 변경했는데 다음과 같이 나왔습니다.





이 저장소에 액세스하여 코드를 살펴볼 수 있습니다.
https://github.com/SwarnaliRoy94/FreeCodeCamp-CSS-Projects/tree/main/CSSVariablesSkyline

이 블로그를 읽으면서 새로운 것을 배웠기를 바랍니다. 소중한 시간을 내주셔서 감사합니다. 토론 섹션에서 저에게 무엇이든 물어보십시오.

행복한 코딩! 행복한 학습!!