CSS 변수에 대한 초보자 가이드(일명 CSS 사용자 정의 속성)

목차:

• 전처리기의 CSS 변수 #
• 기본 CSS의 변수(사용자 정의 속성) #
• 왜 "사용자 정의 속성"입니까? #
• CSS 변수는 어디에 정의되어 있습니까? #
• CSS 변수에 대한 기술 정보 #
• var() 함수 이해하기 #
• calc() 와 함께 CSS 변수 사용 #
• CSS 변수를 사용한 트릭 #

전처리기의 CSS 변수

CSS 전처리기는 10년 넘게 CSS 변수를 사용해 왔습니다. 여기에서 이러한 옵션에 대해 자세히 설명하지는 않겠지만 인기 있는 각 전처리기 라이브러리가 변수를 사용하는 방법을 아는 것이 도움이 된다고 생각합니다.

Sass(또는 SCSS)에서는 다음과 같이 변수를 선언합니다.

달러 기호($)에 유의하십시오. 첫 번째 줄은 변수와 그 값의 선언입니다. 다음 두 블록은 스타일시트에서 나중에 사용되는 변수의 예입니다.

Less.js의 변수는 @ 기호를 사용합니다.

그리고 Stylus에서 변수는 다음과 같습니다.

이러한 타사 기술을 사용하는 변수에 대해 자세히 알아보려면 위에 표시된 각 전처리기에 대한 개별 설명서 섹션을 참조하십시오.

기본 CSS의 변수(사용자 정의 속성)

이렇게 하면 CSS 사양에 정의된 CSS 변수 또는 사용자 정의 속성이 표시됩니다. 일반 CSS에서 변수를 선언하려면 변수 또는 속성에 대해 선택한 사용자 정의 이름 앞에 두 개의 하이픈을 배치한 다음 var() 함수를 사용하여 원하는 위치에 해당 값을 배치합니다.

이 예에서는 두 개의 CSS 변수 --main 및 --accent 를 정의했습니다. 그런 다음 두 개의 다른 요소에서 각 CSS 변수를 사용하여 유연성을 보여주었습니다.

모든 프로그래밍 언어의 변수와 마찬가지로 이를 통해 한 곳에서 변수를 선언할 수 있습니다. 나중에 스타일시트의 모든 곳에서 해당 값을 변경하려면 원래 선언을 변경하기만 하면 되며 변수를 사용하는 모든 위치에 적용됩니다.

왜 "사용자 정의 속성"입니까?

일상 대화에서 개발자는 종종 전처리기와 프로그래밍 언어가 동일한 기능을 참조하는 방식에 따라 이 기능을 "CSS 변수"라고 부릅니다. 그러나 엄격하게 기술적인 관점에서 볼 때 이는 실제로 "변수"가 아니라 사용자 정의 속성 입니다.

속성 이름 앞에 표시되는 두 개의 대시를 제외하고 CSS의 사전 정의 속성과 구문이 동일합니다. 두 개의 대시를 사용하면 CSS 작성자가 일반 CSS 속성과의 충돌에 대한 두려움 없이 유효한 대시 식별자를 사용할 수 있습니다.

사양에 따르면 두 개의 대시만 유효하지 않으며(분명히 향후 사용을 위해 예약됨) CSS는 작성자가 정의한 사용자 정의 속성으로 사용하는 것 외에 유효한 대시 식별자에 의미를 부여하지 않습니다.

일반 CSS 속성과 달리 사용자 정의 속성은 대소문자를 구분합니다. 이는 --main-color 가 --Main-Color 와 같지 않음을 의미합니다. 사용자 정의 속성 이름에 포함할 수 있는 유효한 문자는 문자, 숫자, 밑줄 및 하이픈입니다.

CSS 변수는 어디에 정의되어 있습니까?

위에서 제공한 예에서 볼 수 있듯이 HTML 문서 또는 shadow DOM의 루트 요소에 직접 정의된 CSS 사용자 정의 속성을 자주 볼 수 있습니다. :root 의사 클래스 선택기가 이를 수행합니다.

그러나 CSS 변수는 루트 요소에만 정의되는 것으로 제한되지 않으며 다른 곳에서 정의하는 것이 종종 유리합니다. :root 선택자는 일반적으로 DOM 트리의 최상위 요소를 대상으로 하기 때문에 일반적으로 선택됩니다(전체 문서이든 섀도우 DOM이든).

대부분의 경우 html 요소(HTML 문서의 루트 요소) 또는 body 요소에 사용자 정의 속성을 정의하여 동일한 결과를 얻을 수 있습니다. :root 를 사용하면 코드가 더 미래에 대비할 수 있습니다(예: 사양에서 언젠가 새 요소를 루트로 추가하면 CSS는 그대로 유지됨). 또한 스타일시트를 다른 유형의 문서에 적용할 수 있다고 가정합니다. 다른 루트 요소가 있습니다.

예를 들어 다음 코드는 .sidebar 요소에서만 사용하도록 사용자 정의 속성을 제한합니다.

데모 목적으로 :root 에 정의된 변수를 자주 볼 수 있지만 실용적인 곳이면 어디에서나 사용할 수 있습니다. 사실, 많은 개발자는 초기 개발 중에 더 작은 모듈에 대해 DOM 트리에서 더 낮게 설정한 다음 범위가 더 큰 값을 생성할 때 :root 쪽으로 작업할 것을 권장합니다.

CSS 변수에 대한 기술 참고 사항

모든 요소에 적용할 수 있을 뿐만 아니라 CSS 변수는 상당히 유연하고 다루기 쉽습니다.

다음은 주목할 가치가 있는 몇 가지 사항입니다.

• 일반 CSS 상속 및 계단식 규칙으로 해결됩니다.
• 미디어 쿼리 및 기타 조건부 규칙에서 사용할 수 있습니다.
• 요소의 style 속성에서 정의할 수 있습니다.
• CSS 개체 모델의 기능을 사용하여 읽거나 설정할 수 있습니다.

또한 본질적으로 CSS 변수를 중첩할 수 있다는 점도 주목할 만합니다. 다음 예를 참고하세요.

--main-color 변수를 정의한 다음 동일한 변수 이름을 다음 CSS 변수의 값으로 사용하고 있습니다.

CSS 변수 값에 !important 키워드를 사용할 수도 있지만 이는 문서의 하나 이상의 요소에 사용되는 값이 아니라 다른 변수 정의와 관련된 변수 자체에만 "중요도"를 적용합니다. 이것이 혼란스럽다면 다음과 같은 예가 있습니다.

위의 예에서 배경색은 변수 정의에서 나중에 주황색이 나타나더라도 "밝은 파란색"이 됩니다. 그러나 body 요소의 배경 값 자체는 중요하지 않습니다.

CSS 변수는 initial , inherit 및 unset 같은 CSS 전체 키워드 값을 포함할 수도 있지만 all 속성은 CSS 변수에 영향을 미치지 않습니다(즉, 재설정되지 않음).

var() 함수 이해

이 CSS 변수 자습서의 몇 가지 일반적인 예제에서 사용된 var() 함수를 이미 보았습니다. 그러나 지금까지 다룬 것보다 var() 에 더 많은 것이 있습니다.

첫째, var() 함수는 값에서만 유효합니다. 속성 이름 또는 선택기는 CSS 변수를 사용할 수 없습니다. 또한 미디어 쿼리 값은 CSS 변수를 사용할 수 없습니다(예: @media (max-width: var(--my-var)) 는 유효하지 않음).

var() 함수는 두 개의 인수를 취합니다.

• 포함할 사용자 정의 속성의 이름
• 사용자 정의 속성이 유효하지 않은 경우의 대체 값

다음은 두 번째 인수가 적용되는 예입니다.

위의 코드에서 초기 변수 이름을 영국 또는 캐나다 단어 "color"를 사용하여 철자했지만 변수를 사용할 때 미국 철자 "color"를 통합했습니다. 이렇게 하면 변수가 기술적으로 유효하지 않게 되어 일반 회색( #ccc ) 배경이 대신 적용됩니다.

또한 대체 값에는 자체 쉼표가 포함될 수 있습니다. 예를 들어 폴백이 글꼴 스택인 경우 다음과 같이 정의하는 것이 유효합니다.

내 변수에 --main-font 대신 알 수 없는 --main-type 을 선언하는 결함이 있음을 다시 한 번 주목하세요. 그러면 대체 글꼴 스택인 대체 값이 트리거됩니다. 따라서 첫 번째 쉼표 이후의 모든 항목(다른 쉼표 포함)이 대체 값입니다.

부분에 대한 CSS 변수 사용

CSS 변수를 정의할 때 이 변수가 보유한 값은 그 자체로 유효한 CSS 값일 필요는 없습니다. 전체 값의 일부로 사용할 수 있는 부분 값일 수 있습니다.

예를 들어 글꼴 스택을 나눌 수 있습니다.

이 경우 각 변수 값은 자체적으로 작동하지만 요점을 보여줍니다. rgba() 색상 표기법을 사용하여 좀 더 인위적인 예를 시도해 보겠습니다.

기본적으로 값을 동적으로 "빌드"할 수 있어 이것이 얼마나 유용한지 알 수 있습니다.

calc() 와 함께 CSS 변수 사용하기

CSS 변수를 프로젝트에 통합하는 유용한 방법 중 하나는 calc() 함수와 함께 사용하는 것입니다. 아시다시피 calc() 를 사용하면 값 내에서 계산을 수행할 수 있습니다. 따라서 다음과 같이 할 수 있습니다.

CSS 사용자 정의 속성을 사용하면 예를 들어 미리 정의된 크기를 사용하여 calc() 를 한 단계 더 높일 수 있습니다. Ahmad Shadeed는 비슷한 것을 설명했으며 다음은 예입니다.

이를 통해 미디어 쿼리 내에서 .module 및 .module .module-* 규칙 집합을 사용할 수 있으므로 특정 뷰포트 크기 또는 기타 미디어 기능에 대해 조건부로 이러한 스타일을 표시할 수 있습니다. small/medium/large 모듈은 기본 모듈과 동일한 클래스를 갖지만 필요에 따라 모듈 크기만 덮어씁니다. 위의 예에서 크기에 대한 초기 240 값은 일종의 기본값 역할을 하지만 var() 의 두 번째 인수로 240px 를 전달하여 폴백으로 작동할 수도 있습니다.

CSS 변수를 사용한 트릭

여러 개발자가 수년에 걸쳐 CSS 변수를 사용하여 팁과 트릭을 공유했습니다. 이것은 주로 초보자 튜토리얼이기 때문에 여기에서 자세히 설명하지 않겠지만 다음은 몇 가지를 간략히 요약한 것입니다.

• 앞서 언급했듯이 종횡비 상자의 경우와 같이 인라인 스타일에서 CSS 변수를 사용할 수 있습니다.
• 공백 문자는 CSS 변수의 유효한 값으로, 이를 통해 켜짐/꺼짐 트릭(예: 다크 모드 등)을 수행할 수 있으며 Lea의 게시물에서 읽을 수 있습니다.
• 인라인 스타일에서는 호버 스타일을 작성할 수 없지만 CSS 변수를 사용하여 이 문제를 해결할 수 있습니다.
• CSS 변수를 사용하면 여기에 설명된 대로 여러 색상의 SVG를 더 쉽게 생성할 수 있습니다.
• 이 게시물에서 자세히 설명하는 CSS 변수를 사용하여 실용적이고 유지 관리 가능한 디자인 시스템과 테마를 구축할 수 있습니다.
• Michelle Barker가 설명한 대로 CSS 변수를 사용하여 그리드 레이아웃 기능을 사용하여 보다 효율적이고 유지 관리 가능한 그리드를 구축할 수 있습니다.

결론

CSS 변수 또는 CSS 사용자 정의 속성은 이 편리한 기능을 지원하는 전 세계적으로 사용 중인 브라우저의 90% 이상이 현재 사용할 준비가 되어 있습니다. 기본 및 구문에 대한 이 토론을 통해 최신 프로젝트에서 CSS 변수를 아직 고려하지 않았다면 고려하도록 권장합니다.

CSS 변수 사용이 일부 전역 테마 색상으로 제한되어 있는 경우 이 튜토리얼을 통해 더 많이 사용하고 자신만의 트릭을 만들 수 있을 것입니다.

이제 CSS 변수 작업을 마쳤으므로 다른 가이드를 확인하세요.

• CSS 그리드 레이아웃
• Parcel.js 소개
• CSS 플렉스박스 튜토리얼
• 초보자를 위한 웹팩
• 초심자 개발자를 위한 마이크로 인터랙션 튜토리얼

이 CSS 변수 튜토리얼과 관련하여 질문이 있는 경우 아래 의견에 자유롭게 제출하십시오.

Chris Fitzgerald와 Karol K.의 레이아웃 및 프레젠테이션