CSS에서 변수를 사용하는 방법 : CSS 사용자 정의 속성

CSS 변수 (공식적으로 사용자 정의 속성이라고도 함)는 코드베이스 전체에서 한 번 설정하고 여러 번 사용할 수있는 사용자 정의 값입니다. 그들은 색상, 글꼴, 크기 및 애니메이션 값을보다 쉽게 ​​관리하고 웹 응용 프로그램의 일관성을 보장 할 수 있습니다. 예를 들어, 브랜드 색상을 CSS 속성 (-primaryColor : #7232FA)으로 설정하고 브랜드 색상을 사용하는 구성 요소 또는 스타일 (배경 : var (-primarcolor);) 에서이 값을 사용할 수 있습니다.

클리너 및 비 반복 코드를 제공하는 것 외에도 CSS 변수는 컬러 팔레트를 구축하고 응답 성을 향상 시키며 동적 유형 시스템을 만드는 데 사용될 수 있습니다. 이 게시물은 내 가이드 CSS 마스터에서 추출되어 더 나은 효율적인 CSS를 쓰도록 가르쳐줍니다. 또한 워크 플로를 개선하고 더 나은 응용 프로그램을 구축 할 수있는 도구를 마스터하는 법을 배웁니다.

키 테이크 아웃

CSS 사용자 정의 속성 소개 : CSS 변수 또는 사용자 정의 속성을 사용하면 개발자가 값을 한 번 정의하고 스타일 시트 전체에서 재사용 할 수 있습니다. 이는 색상, 글꼴, 크기 및 애니메이션 값의 관리를 단순화하여 웹 응용 프로그램의 코드 유지 관리 및 일관성을 향상시킵니다. 커스텀 속성은 프로젝트 전체에 광범위하게 적용될 수있어 최소한의 노력으로 동적 업데이트 및 주제 조정을 가능하게합니다.

CSS 변수의 장점 및 응용 : 반복을 줄임으로써 코드를 정리하는 것 외에도 CSS 변수는 동적 테마, 반응 형 디자인 및 체계적인 유형 스케일을 생성 할 수있는 잠재력을 발휘합니다. 복잡한 컬러 팔레트 및 레이아웃을 관리하는 데 중요한 역할을하며 사용자 상호 작용 또는 밝은 모드와 어두운 모드 사이의 전환과 같은 사용자 상호 작용 또는 환경 조건을 기반으로 디자인 요소를보다 쉽게 ​​조정할 수 있습니다.

실제 구현 및 확장 된 기능 : 예제를 통해이 기사는 테마 및 응답 성을 포함한 다양한 목적으로 CSS 사용자 정의 속성을 정의, 사용 및 조작하는 방법을 보여줍니다. 미디어 쿼리 및 JavaScript와 함께 CSS 변수의 다양성을 강조하여 특히 React, Angular 및 VUE와 같은 구성 요소 기반 프레임 워크 내에서 스타일링 전략을 크게 간소화 할 수있는 잠재력을 보여줍니다. 이 접근법은 웹 인터페이스를 구축하는 모듈 식적이고 유지 관리 가능하며 확장 가능한 방법을 장려합니다.

CSS 사용자 정의 속성 정의 사용자 정의 속성을 정의하려면 이름을 선택하고 두 개의 하이픈으로 접두사를 만듭니다. 영숫자 문자는 이름의 일부가 될 수 있습니다. 하이픈 (-) 및 밑줄 (_) 문자도 허용됩니다. 광범위한 유니 코드 문자는 사용자 정의 속성 이름의 일부가 될 수 있습니다. 여기에는 이모티콘이 포함되지만 명확성과 가독성을 위해 영숫자 이름을 고수하십시오.

예는 다음과 같습니다.

1. <span>--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */</span>

   --CSS 파서에게 이것은 사용자 정의 속성임을 나타냅니다. 가변으로 사용될 때, 구문 분석 엔진은 속성을 그 값으로 대체합니다.

   사용자 정의 속성 이름은

   사례에 민감합니다. 즉, -primarycolor와 -primarycolor는 두 가지 별개의 속성 이름으로 간주됩니다. 그것은 재산과 가치 사례가 중요하지 않은 전통적인 CSS에서 벗어난 것입니다. 그러나 ECMAScript의 변수 이름에 대한 규칙과 일치합니다.

   디스플레이 또는 글꼴과 같은 다른 속성과 마찬가지로 CSS 사용자 정의 속성은 선언 블록 내에 정의되어야합니다. 일반적인 패턴 중 하나는 다음을 사용하여 사용자 정의 속성을 정의하는 것입니다. : 루트는 문서의 루트 요소를 나타내는 의사 요소입니다. html 문서의 경우 요소입니다. SVG 문서의 경우 사용자 정의 속성을 변수로 사용하려면 var () 함수를 사용해야합니다. 예를 들어 -primarycolor 사용자 정의 속성을 배경색으로 사용하려면 다음을 수행합니다.

   우리의 사용자 정의 속성 값은 배경색 속성의 계산 된 값이 될 것입니다. 현재까지 사용자 정의 속성은 표준 CSS 속성에 대한 값을 설정하기 위해 변수로만 사용될 수 있습니다. 예를 들어,

   이름

   를 변수로 저장 한 다음 재사용 할 수 없습니다. 다음 CSS는 작동하지 않습니다

   <span><span>:root</span> {
   </span>  <span>--primarycolor: #0ad0f9ff;
   </span><span>}</span>

   당신은 또한 속성 - 값 를 변수로 저장하고 재사용 할 수 없습니다. 다음 예제는 유효하지 않습니다 마지막으로, 값 문자열의 일부로 변수를 연결할 수 없습니다 : .

   CSS 사용자 정의 속성 vs. css 변수 “Custom Property”는 언젠가이 기능을 사용하는 방법을 설명하는 미래의 방지 이름입니다. 그러나 이는 브라우저 공급 업체가 CSS 확장 사양을 구현하는 경우 변경 될 수 있습니다. 이 사양은 사용자 정의 선택기 조합, 함수 및 at rules로 CSS를 확장하는 방법을 정의합니다. 우리는 일반적으로 사용자 정의 속성을 "변수"라고 부르며, 지금까지 이것이 우리가 사용할 수있는 유일한 방법입니다. 이론적으로는 완전히 상호 교환 가능한 용어가 아닙니다. 실제로 그리고 지금은 그것들입니다. 이 게시물에서 사용자 정의 속성

   를 주로 사용하겠습니다. 문장이 명확 해지면

   변수를 사용합니다 폴백 값 설정 var () 함수는 최대 두 개의 인수를 받아들입니다. 첫 번째 인수는 사용자 정의 속성 이름이어야합니다. 두 번째 인수는 선택 사항이지만 선언 값이어야합니다. 이 선언 값은 사용자 정의 속성 값이 정의되지 않을 때 적용되는 폴백 또는 기본값으로 기능합니다. 다음 CSS를 사용해 봅시다 :

   -Accent-color가 정의되면-값이#f30이라고 말하면 .btn__call-to-action 클래스 속성이있는 모든 경로의 채우기 색상은 빨간색 오렌지 채우기가 있습니다. 정의되지 않으면 채우기는 깊은 하늘색입니다.

   선언 값도 중첩 될 수 있습니다. 다시 말해, 변수를 var 함수의 폴백 값으로 사용할 수 있습니다.

   <span>--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */</span>

   위의 CSS에서 -Books-BG가 정의되면 배경색은 -Books-BG 속성의 값으로 설정됩니다. 그렇지 않다면, 배경색은 대신 -arts-bg에 할당 된 값이 될 것입니다. 그 중 어느 것도 정의되지 않으면 배경색은 속성의 초기 값이됩니다.이 경우 투명합니다. 사용자 정의 속성에 사용되는 속성에 대해 유효하지 않은 값이있을 때 비슷한 일이 발생합니다. 다음 CSS를 고려하십시오

   이 경우-footer-link-hover 속성의 값은 유효한 색상이 아닙니다. 대신, 바닥 글로 호버는

   요소의 색상에서 색상을 상속합니다 사용자 정의 속성은 다른 CSS 값이 해결되는 것과 같은 방식으로 해결됩니다. 값이 유효하지 않거나 정의되지 않은 경우 CSS 파서는 속성이 상속 될 수있는 경우 (색상 또는 글꼴과 같은) 상속 된 값을 사용하고 (배경색과 같이) 초기 값을 사용합니다. 캐스케이딩 값 사용자 정의 속성은 또한 캐스케이드의 규칙을 준수합니다. 그들의 값은 후속 규칙에 의해 상환 될 수있다 :

   위의 예에서, 본문 텍스트는 짙은 회색입니다. 우리는 또한 선택별로 값을 재설정 할 수 있습니다. 이 CSS에 몇 가지 규칙을 추가하겠습니다

   <span><span>:root</span> {
   </span>  <span>--primarycolor: #0ad0f9ff;
   </span><span>}</span>

   이 경우

   요소 태그로 싸인 텍스트는 주황색입니다. 그러나

   또는 다른 요소 내의 텍스트는 여전히 짙은 회색입니다.

   당신은 또한 스타일 속성을 사용하여 사용자 정의 속성의 값을 설정할 수 있습니다-예를 들어, style = "-브랜드-콜로 : #9a09af". . 사용자 정의 속성 및 컬러 팔레트

   사용자 정의 속성은 HSL 컬러 팔레트를 관리하는 데 특히 효과적입니다.  hsl은 색조, 채도, 가벼움 를 나타냅니다. RGB와 유사한 라이트 기반 색상 모델입니다. HSL () 및 HSLA () 색상 함수 덕분에 CSS에서 HSL 값을 사용할 수 있습니다. hsl () 함수는 색조, 채도 및 가벼움의 세 가지 인수를 수락합니다. hlsa () 함수는 또한 네 번째 인수를 수용하여 색상의 알파 투명성 (0과 1 사이의 값)을 나타냅니다. RGB 시스템은 색상을 빨간색, 녹색 및 파란색의 비율로 표현하지만 HSL은 색조가 해당 원의 학위 위치 인 색상 원을 사용하며 톤 또는 그늘은 채도 및 빛 값을 사용하여 정의됩니다. 채도는 0%에서 100% 사이이며 0%는 회색이고 100%는 풀 컬러입니다. 가벼움은 또한 0%에서 100% 사이 일 수 있으며, 여기서 0%는 검은 색이고 100%는 흰색이며 50%는 정상적인 색입니다.

   OpenClipart의 Crazyterabyte에 의한 색채 휠 HSL 색상 시스템에서 1 차 색상 빨간색, 녹색 및 파란색은 0도/360도, 120도 및 240도에서 120도 떨어져 있습니다. 2 차 색상 (시안, 마젠타 및 노란색)도 120도 떨어져 있지만 1 차 색상 반대쪽에 각각 180도, 300도 및 60도/420도에 앉아 있습니다. 3 차, 4 차 및 기타 색상은 대략 10도 단위로 떨어집니다. HSL 표기법을 사용하여 작성된 Blue는 HSL (240, 100%, 50%)입니다 HSL 인수 단위 hsl () 및 hsla () 함수의 첫 번째 인수에 대해 단위가없는 값을 사용하면 브라우저는 학위 단위의 각도라고 가정합니다. 그러나 지원되는 CSS 앵글 장치를 사용할 수 있습니다. 청색은 또한 HSL (240deg, 100%, 50%), HSL (4.188rad, 100%, 50%) 또는 HSLA (0.66 회전, 100%50%)로 표현 될 수 있습니다. 여기서 재미있는 곳이 있습니다. 맞춤 속성을 사용하여 색조 값을 설정하고 채도와 가벼움 값을 조정하여 가볍고 어두운 색조를 설정할 수 있습니다.

   위의 CSS는 아래에 표시된 팔레트를 제공합니다

   이것은 간단한 버전이지만 사용자 정의 속성을 사용하여 채도 및 가벼움 값을 조정할 수도 있습니다. 강력한 팔레트 생성 Dieter Raber는“사용자 정의 속성, HSL 및 작은 calc ()를 사용하여 색상 테마 생성”에서 강력한 팔레트 생성 기술에 대해 논의합니다. 또 다른 아이디어는 사용자 정의 속성과 calc () 함수를 결합하여 기본 색조에서 제곱 색 구성표를 생성하는 것입니다. 다음 예제에서 제곱 색 구성표를 만들어 봅시다. A 제곱 색상 구성표는 컬러 휠에서 서로 같은 4 가지 색상, 즉 90도 간격으로 구성됩니다.

   이 CSS의 비트는 아래에 표시된 다소 열대에서 영감을 얻은 색 구성표를 제공합니다.

   사용자 정의 속성도 나중에 섹션에서 볼 수 있듯이 미디어 쿼리와 잘 작동합니다. CSS 변수를 사용하여 어두운 테마 팔레트를 만들기 위해 CSS 사용자 정의 속성을 사용하여 사이트의 어두운 테마에 대한 변수 세트를 정의 할 수 있습니다. 페이지 스타일의 아래 예를 들어, 해당 색상의 사용자 정의 속성을 정의한 후 다른 선택기의 모든 HSL 색상을 변수로 교체 할 수 있습니다.

   사용자 정의 속성에 대한 적절한 이름이 사용되었습니다. 예를 들어,--nav-bg-color는 nav 배경 의 색상을 나타내고,--nav-text-color는 nav 포 그라운드/text

   <span>--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */</span>

   .의 색상을 나타냅니다. 🎜> 이제 컨텐츠가있는 루트 선택기를 복제하지만 dark

   value : 가있는 테마 속성을 추가하십시오. 요소에 A dark 값을 갖는 A 테마 속성이 추가되면이 테마가 활성화됩니다. 이제 HSL 색상의 광 값을 줄여 어두운 테마를 제공하여 이러한 변수의 값을 수동으로 재생할 수 있습니다. 이미지의 렌더링을 조정하는 데 일반적으로 사용되지만 다른 요소와 함께 사용할 수 있습니다. 다음 코드를 뿌리 [테마 = 'dark'] : 에 추가하십시오 invert () 필터는 선택한 요소의 모든 색상을 반전시킵니다 (이 경우 모든 요소). 반전 값은 백분율 또는 숫자로 지정할 수 있습니다. 100%또는 1의 값은 요소의 색조, 채도 및 빛 값을 완전히 뒤집습니다. Brightness () 필터는 요소를 더 밝게하거나 어둡게 만듭니다. 0의 값은 완전히 어두운 요소를 초래합니다 invert () 필터는 일부 요소를 매우 밝게 만듭니다. 이들은 밝기 (0.6)를 설정하여 톤을 낮 춥니 다 어둠이 다른 어두운 테마 :

   javaScript 로 테마를 전환합니다 이제 사용자가 Dark/Light 버튼을 클릭 할 때 javaScript를 사용하여 어두운 테마와 가벼운 테마를 전환합시다. html에서 다음 코드와 함께 닫기 전에 인라인 를 추가하십시오. 을 나타냅니다. 이 코드는 .hasattribute () 메소드를 사용하여

   테마

   <span><span>:root</span> {
   </span>  <span>--primarycolor: #0ad0f9ff;
   </span><span>}</span>

   속성이 존재하는지 확인하고

   dark value가 존재하지 않으면 속성을 추가하여 스위치를 Dark로 만듭니다. 주제. 그렇지 않으면 속성이 제거되어 빛 테마로 전환됩니다. . 참고 : CSS의 Prefers Color-Scheme 기능과 함께 사용해야합니다.이 기능은 사용자의 운영 체제 또는 사용자 에이전트 (브라우저) 설정에서 격렬한 테마를 자동으로 변경하는 데 사용할 수 있습니다. 이것은 다음 섹션에 나와 있습니다. 사용자 정의 속성 및 미디어 쿼리를 사용하는 우리는 미디어 쿼리와 함께 사용자 정의 속성을 사용할 수도 있습니다. 예를 들어, 사용자 정의 속성을 사용하여 명확하고 어두운 색 구성표를 정의 할 수 있습니다.

   <span>--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */</span>

   마찬가지로, 우리는 사용자 정의 속성을 사용하여 스크린과 인쇄물의 기본 글꼴 크기를 변경할 수 있습니다 :

   이 경우 인쇄 및 화면에 미디어에 적합한 장치를 사용하고 있습니다. 두 미디어의 경우 10 단위의 기본 글꼴 크기 (화면 용 픽셀, 인쇄 포인트를 사용합니다. 또한 -Base-Font-Size의 값을 사용하여 루트 요소 (HTML)의 시작 크기를 설정합니다. 그런 다음 rem 단위를 사용하여 기본 글꼴 크기에 비해 타이포그래피를 크기를 크기로 만들 수 있습니다. JavaScript와 함께 사용자 정의 속성을 사용하는 <span><span>:root</span> { </span> <span>--primarycolor: #0ad0f9ff; </span><span>}</span> 기억하십시오 : 사용자 정의 속성은 CSS 속성이며, 우리는 이와 같이 상호 작용할 수 있습니다. 예를 들어 CSS.Supports () API를 사용하여 브라우저가 사용자 정의 속성을 지원하는지 테스트 할 수 있습니다.

   우리는 또한 setproperty () 메소드를 사용하여 사용자 정의 속성 값을 설정할 수 있습니다 :

   removeProperty ()를 사용하는 것도 비슷하게 작동합니다. 사용자 정의 속성 이름을 인수로 전달하십시오

   javaScript가있는 값으로 사용자 정의 속성을 사용하려면 속성 이름이있는 var () 함수를 인수로 사용하십시오.

   ALAS, 스타일 객체의 Square-Bracket 구문 또는 낙타 특성을 사용하여 사용자 정의 속성을 설정할 수 없습니다. 다시 말해서, document.body.style .-- bg-home 또는 docum 사용자 정의 속성 및 구성 요소 react, angular 및 vue와 같은 JavaScript 프레임 워크는 개발자가 JavaScript를 사용하여 재사용 가능한 공유 가능한 HTML 블록을 생성합니다. 종종 구성 요소 수준에서 정의되는 CSS를 사용합니다. JavaScript 프레임 워크에 대한 body { background-color: var(--primarycolor); } sitepoint는 JavaScript 프레임 워크 작업에 대해 더 많이 배우려면 React, Angular 및 Vue에 대한 광범위한 리소스를 가지고 있습니다. React의 경우 를 확인하십시오. Angular의 경우 배우자 : 첫 주 및 많은 각도 기사와 튜토리얼이 있습니다. vue의 경우 jump start vue.js :root { --top-border: border-top; /* Can't set a property as custom property's value */ var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */ } 및 더 많은 Vue 기사를 확인하십시오 우리의 React 구성 요소는 CSS를 JavaScript 파일로 가져옵니다. 컴파일되면 Field-Button.CS의 내용이 인라인으로로드됩니다. 다음은 사용자 정의 속성과 함께 사용하는 가능한 한 가지 방법입니다.

   이 예에서는 버튼의 배경색에 맞춤형 속성을 사용했으며 경우의 경우 기본 색상과 함께 버튼 색상을 사용했습니다. 여기에서 우리는 글로벌 스타일 시트 또는 스타일 속성을 통해 로컬로-버튼 BG-color의 값을 설정할 수 있습니다. 값을 반응 "소품"으로 설정하겠습니다. 반응 소품 ( 특성 라는 소품을 추가합니다

   <span>--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */</span>

   이제이 변경 사항을 지원하려면 FieldButtOngroup을 업데이트해야합니다

   위의 코드에서, 우리는 사용자 정의 속성의 이름을 보유하고 ButtonBGColor Prop의 이름과 스타일 속성에 대한 값을 설정하는 버튼 스타일 객체를 추가했습니다.

   . 스타일 속성을 사용하면 CSS 작성에 대해 가르친 모든 것에 반대 할 수 있습니다. CSS의 판매 지점은 여러 HTML 및 XML 문서에서 사용하기 위해 하나의 스타일 세트를 정의 할 수 있다는 것입니다. 반면에 스타일 속성은 해당 CSS의 범위를 적용되는 요소로 제한합니다. 우리는 그것을 재사용 할 수 없습니다. 그리고 우리는 캐스케이드를 이용할 수 없습니다 그러나 구성 요소 기반 프론트 엔드 아키텍처에서는 하나의 구성 요소가 여러 팀에서 여러 팀에서 사용되거나 클라이언트 프로젝트에서 공유 될 수도 있습니다. 이 경우 캐스케이드의 "글로벌 범위"와 스타일 속성이 제공하는 좁은 "로컬 스코프"와 결합 할 수 있습니다. 스타일 속성으로 사용자 정의 속성 값을 설정하면 효과를

   <span><span>:root</span> {
   </span>  <span>--primarycolor: #0ad0f9ff;
   </span><span>}</span>

   로 제한합니다. 그러나 표준 CSS 속성 대신 사용자 정의 속성을 사용했기 때문에 구성 요소 소품 대신 링크 된 스타일 시트에서 intton-bg-color를 정의 할 수있는 옵션이 있습니다.

   결론 사용자 정의 속성은 사전 프로세서의 가장 좋은 기능 중 하나 인 변동성을 취하여 CSS에 고유하게 만듭니다. 사용자 정의 속성을 사용하면 다음과 같이 할 수 있습니다

   재사용 가능한 테마 구성 요소를 만듭니다 다양한 뷰포트 크기 및 미디어에 대한 패딩, 여백 및 타이포그래피를 쉽게 조정합니다. CSS 에서 색 값의 일관성을 향상시킵니다

   변수는 다양한 응용 프로그램을 가지고 있으며 구성 요소 기반 설계 시스템에 특히 유용합니다. 이제 CSS에서 변수 또는 사용자 정의 속성 사용 방법을 더 잘 이해하기를 바랍니다. CSS 지식을 확장하고 이와 같은 유용한 팁을 얻으려면 내 책인 CSS Master를 확인하십시오.

   CSS 사용자 정의 속성에 대한 FAQS CSS 사용자 정의 속성이란 무엇입니까? CSS 변수라고도하는 CSS 사용자 정의 속성은 스타일 시트에 값을 저장하고 재사용하기 위해 개발자가 정의한 엔티티입니다. 그들은 -main-color와 같은-접두사로 시작하며 스타일 시트 전체에 사용할 값을 할당 할 수 있습니다. CSS 사용자 정의 속성을 어떻게 선언합니까? CSS 사용자 정의 속성을 선언하려면 -main-color와 같은 이름을 사용하여--Main-Color와 같은 이름을 사용하십시오. var (-main-color : #3498db)와 같은 var () 함수를 사용하여 값을 할당합니다. CSS 사용자 정의 속성을 사용하면 어떤 이점이 있습니까? CSS 사용자 정의 속성은 스타일을 관리하는보다 유연하고 유지 관리 가능한 방법을 제공합니다. 그들은 쉬운 테마, 빠른 업데이트 및 값의 중앙 집중화를 허용하여 클리너 및 모듈 식 코드를 촉진합니다.CSS 사용자 정의 속성은 단순한 색상 이상으로 사용할 수 있습니까? 예, CSS 사용자 정의 속성은 색상, 글꼴 크기, 간격 등을 포함한 다양한 유형의 값에 사용할 수 있습니다. 스타일 시트의 값을 매개 변수화하는 방법을 제공합니다. CSS 사용자 정의 속성이 상속됩니까? 예, CSS 사용자 정의 속성은 표준 상속 규칙을 따릅니다. 속성이 요소에 정의되지 않으면 부모로부터 값을 상속받습니다. 이로 인해 일관된 설계 시스템을 만드는 데 강력합니다 CSS 사용자 정의 속성을 미디어 쿼리에 사용할 수 있습니까? 예, CSS 사용자 정의 속성은 미디어 쿼리에 사용할 수 있습니다. 이를 통해 화면 크기 또는 기타 미디어 기능을 기반으로 속성 값을 조정하여보다 역동적 인 응답을 허용합니다.

위 내용은 CSS에서 변수를 사용하는 방법 : CSS 사용자 정의 속성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!