CSS 변수 이해 (및 사용 방법)
게시 됨: 2025-07-13CSS 변수는 재사용 가능한 설계 성분과 같습니다. 브랜드 색상, 글꼴 크기 또는 간격으로 한 번 정의 한 다음 필요한 곳에 사용하십시오. 그들은 다른 섹션에서 동일한 16 진 코드와 픽셀 값을 입력하지 못하게합니다.
그들의 가장 큰 이점은 그들이 얼마나 쉬운 지에 대한 것입니다. 변수를 한 번 업데이트하면 사용되는 모든 장소도 변경 사항을 반영합니다. 따라서 여러 섹션에서 동일한 값을 수동으로 반복하지 않을뿐만 아니라 하나의 값 만 변경하여 전체 웹 사이트의 모양을 조정할 수도 있습니다.
Divi 5를 사용하면 CSS 변수를 사용하기 위해 코드를 작성할 필요가 없습니다. Divi의 디자인 변수를 사용하면 비주얼 코드 워크 플로에서 사용할 수 있습니다. 어떻게 작동하는지 궁금하십니까? 계속 읽으십시오.
- 1 CSS 변수는 무엇입니까?
- 1.1 CSS 변수의 작동 방식
- 1.2 CSS 변수 이해 캐스케이드
- 1.3 폴백 값 추가
- 2 Divi 5에서 CSS 변수를 사용하는 코드없는 방법
- 2.1 Divi 5에서 CSS 변수를 정의하십시오
- 3 Divi 5가 CSS 가변 워크 플로우를 쉽게 만드는 방법
- 3.1 1. 디자인 프레임 워크를 만듭니다
- 3.2 2. 유연한 스타일에 옵션 그룹 사전 설정을 사용하십시오
- 3.3 3. 더 많은 제어를 위해 사용자 정의 CSS 변수를 선언합니다
- 4 Divi는 CSS 변수에 대한 내장 접근 방식을 제공합니다
CSS 변수는 무엇입니까?
CSS 변수를 자신의 디자인 습관을 위해 만든 사용자 정의 레이블로 생각하십시오. 이동 이미지 테두리 반경은 무엇입니까? 보통 섹션 사이에 얼마나 많은 간격을 두십니까? 어디에서나 사용하는 서명 버튼 색상이 있습니까? 이러한 고유 한 스타일을 모두 CSS 변수로 바꿀 수 있습니다.
이들은 브라우저가 기본적으로 알고있는 값이 아닙니다. 모든 것이 관습입니다. 이름을 결정하고 선호하는 값을 할당 한 후 원하는 곳에 사용하십시오. 스타일링을 더 빠르고 깨끗하며 나중에보다 쉽게 업데이트 할 수있는 자신만의 속기를 만드는 것과 같습니다.
예를 들어 봅시다. 사이트의 기본 색상이 #007bff가되기를 원합니다. 당신은 다음과 같이 선언합니다.
:root {
--primary-color: #007bff;
}
여기서는 "-프라이드 컬러"가 당신의 변수 이름이며, "#007bff"는 그 값입니다. 브라우저가 인식 할 수있는 사용자 정의 레이블 안에 색상을 저장했습니다.
사용하려면 16 진 코드를 다시 작성하지 않습니다. var () 함수 내의 변수를 다음과 같이 호출합니다.
button {
background-color: var(--primary-color);
}한 줄의 코드는 버튼이 항상-값-콜로어에서 값을 가져옵니다.
이제 필요한 곳마다 사용할 수 있으며 브랜드 색상을 업데이트 할 시간이되면 수십 개의 파일을 파헤칠 필요가 없습니다. 변수를 한 번만 변경하면 사용되는 모든 요소가 자동으로 업데이트됩니다. 예를 들어, 버튼, 제목 및 경계는 모두 컬러를 사용합니다. 단일 편집은 모두 업데이트됩니다.
이것이 CSS 변수가 사이트 전체의 업데이트를 단순화하는 방식입니다.
CSS 변수의 작동 방식
CSS 변수를 선언하려면 기본 구문은 다음과 같습니다.
.root {
--name: value;
} 주목해야 할 몇 가지. 첫째, CSS 변수는 항상 두 개의 대시 ( -)로 시작합니다. 이것이 바로 브라우저가 디자인 시스템에 대해 정의한 내용을 알고있는 방식입니다.
글꼴 크기, 색상 또는 패딩과 같은 내장 CSS 속성은 이미 의미가 있습니다. 브라우저는 그들과 무엇을 해야하는지 정확히 알고 있습니다. 그러나 사용자 정의 속성은 값을 할당 할 때까지 빈 레이블입니다. –primary-Color와 같은 웹 사이트 프로젝트에서 자신만의 디자인 규칙을 작성하고 브라우저에 어떤 의미인지 알려줍니다.
CSS 변수를 정의하는 곳도 큰 차이를 만듭니다.
다음과 같은 내부에 배치하면 (위에서했던 것처럼) 글로벌이됩니다. 즉, 모든 페이지와 요소에서 변수를 사용할 수 있습니다. 그 때문입니다. 루트는 HTML의 최상위 요소, 일반적으로 <html> 태그를 대상으로합니다.
그러나 특정 클래스 또는 선택기 내에서 동일한 변수를 정의하면 해당 한 지점에서만 작동합니다. 이와 같이:
.card {
--bg-color: #f4f4f4;
} 여기서 –bg-color는 .card 선택기 내부에만 적용됩니다. 다른 곳에서 사용해 보지 않으면 나타나지 않습니다. 예를 들어 아래에는 두 개의 카드가 표시됩니다.
카드 1은 .card 컨테이너 내부에 로컬로 정의 된 변수-카드 BG를 사용합니다. 해당 변수는 해당 컨테이너 내부에서만 작동합니다. 카드 3에는 적용되지 않습니다.
반면, 카드 2는 –global-color에서 배경을 가져옵니다. 그렇기 때문에 카드 4도 같은 색상을 선택합니다. 글로벌 변수에 액세스 할 수 있습니다.
모범 사례로 전체 사이트에서 일관성을 원한다면 항상 CSS 값을 다음과 같이 정의하십시오. 로컬로 변수를 정의하고 잊어 버렸지 만 이제는 예상대로 작동하지 않으면 어떻게해야합니까? 폴백 값을 설정하여 문제를 해결할 수 있습니다. 우리는 이것에 대해 한동안 이야기 할 것입니다.
CSS 변수 이해 캐스케이드
"캐스케이드"라는 용어에 익숙 할 수 있습니다. 글쎄, CSS 변수도 캐스케이드하지만 이것이 무엇을 의미합니까?
변수가 전역으로 (in : root)와 로컬 (클래스 또는 컨테이너 내부)을 모두 정의하면 브라우저는 항상 요소에 더 가깝게 사용됩니다. 이것이 CSS에서 계단식이 작동하는 방식입니다. 면밀한 규칙이 우선합니다.
그리고 바로 어두운 모드가 작동하는 방식입니다.
예를 들어, –text-color : black in : root를 정의 할 수 있습니다. 그러나 .dark 모드 컨테이너 내부에서 흰색으로 재정의 할 수 있습니다. 따라서 사용자가 다크 모드 옵션을 토글하면 변수 이름이 동일하게 유지 되더라도 브라우저는 .dark-mode 내부의 로컬 버전을 사용합니다.
이를 통해 컨텍스트를 기반으로 스타일을 조정하면서 이름 지정을 일관되게 유지할 수 있습니다. CSS 변수가 간단한 재사용 성을 넘어서는 한 가지 방법입니다. 그들은 어디에서 어떻게 사용되는지에 따라 적응합니다.
폴백 값 추가
때로는 사용할 수없는 CSS 변수를 참조 할 수 있습니다. 어쩌면 특정 섹션 내부에서만 정의되었거나 실수로 제거되었습니다. 이런 일이 발생하면 브라우저는 무엇을 해야할지 모릅니다. 해당 변수에 의존하는 스타일은 단순히 적용되지 않습니다.
VAR () 함수 내부에 직접 폴백 값을 추가하여이를 방지 할 수 있습니다. 원래 변수가 누락 된 경우 백업 역할을합니다. 작동 방식은 다음과 같습니다.
h1 {
color: var(--heading-color, #000); /* #000 - This is the fallback value. */
} 이것은 브라우저가 존재하는 경우 헤드 컬러를 사용하도록 지시합니다. 그렇지 않은 경우 대신 검은 색 (#000)을 사용하십시오.
폴백은 재사용 가능한 구성 요소를 구축하거나 변수를 항상 사용할 수없는 여러 섹션에서 작업 할 때 특히 유용합니다. 그들은 당신의 디자인을 안정적이고 일관성있게 유지합니다.
색상과 같은 체인 폴백도 할 수 있습니다 : var (–accent-color, var (–primary-color, #333));
여기서 브라우저는 –accent-color를 먼저 확인합니다. 누락되면, 그것은-컬러를 시도합니다. 또한 누락 된 경우 기본값은 #333으로 나타납니다. 이것은 스타일에 안전망을 제공하므로 일부 값이 누락 되어도 계속 올바르게 렌더링됩니다.
Divi 5에서 CSS 변수를 사용하는 코드없는 방법
CSS 변수 (글로벌 제어, 재사용 가능한 값, 계단식 로직)에 대해 본 모든 것은 훌륭하게 들리지만 캐치와 함께 제공됩니다. 코드를 작성하고 관리해야합니다. 많은 디자이너에게는 이상적이지 않습니다. 시각적 디자인을 선호한다면 어떨까요? 그것은 당신이 CSS 변수를 사용할 수 없다는 것을 의미합니까? 잘못된.
Divi 5는 동일한 CSS 변수 논리를 사용하는 더 빠르고 시각적 인 방법을 제공합니다. Divi Builder에 바로 구축 된 CSS 변수에 대한 코드 대안 인 설계 변수를 소개합니다.
YouTube 채널을 구독하십시오
설계 변수 ( CSS 변수와 같은) 는 한 번 정의하고 사이트에서 사용하는 재사용 가능한 값입니다 . 다른 점은 당신이하는 방법입니다. 웹 사이트의 스타일 시트에서이를 정의하지 않고 Divi Builder 내부의 가변 관리자 에서 시각적으로 정의합니다.
CSS 변수와 마찬가지로 디자인 변수에 이름을 지정하고 값을 할당합니다. 일단 저장되면 해당 속성을 지원하는 모든 모듈에서 사용할 수 있습니다.
저장된 변수를 적용하는 것도 쉽습니다. 모듈의 설정 옵션을 가리키고 클릭하여 저장된 모든 변수를 채우고 적용하려는 변수를 선택하여 변수 관리자 아이콘을 찾으십시오.
설계 변수의 가장 중요한 부분은 디자인 값뿐만 아니라 이미지, 링크 및 텍스트 문자열과 같은 반복 가능한 컨텐츠 값을 저장할 수 있다는 것입니다. 이렇게하면 웹 사이트 전체에서 수동 작업없이 일반적인 콘텐츠 요소를 재사용하여 반복 콘텐츠를 효과적으로 관리합니다.
Divi 5의 디자인 변수에 대한 모든 것을 배우십시오
Divi 5에서 CSS 변수를 정의합니다
이는 설계 변수가 CSS 변수를 대체한다는 의미입니까? 정확히 아닙니다.
디자인 변수는 브랜드 색상과 같이 자주 사용하는 값을 저장하는 데 적합하지만 모든 스타일이 글로벌이어야하는 것은 아닙니다. 특히 단일 페이지에 고유 한 경우 모든 사소한 조정을 설계 변수로 저장하고 싶지는 않습니다.
사용자 정의 영웅 섹션이있는 방문 페이지를 작성한다고 가정 해 봅시다. 높이는 사이트의 다른 것과 다르며 재사용 할 가능성은 거의 없습니다. 디자인 변수로 저장하는 것이 글로벌 라이브러리를 가장 잘 사용하는 것은 아닙니다. 이 경우 페이지 설정에서 직접 CSS 변수를 정의하는 것이 더 깨끗한 선택입니다.
복합체 또는 일회성 레이아웃에도 동일하게 적용됩니다. 어쩌면 해당 컨텍스트와 관련된 사용자 정의 하이라이트 색상 또는 레이아웃 별 간격 값이 필요할 수 있습니다. 재사용하지 않을 변수로 시스템을 크라우는 대신 CSS 변수를 필요한 곳에 바로 정의 할 수 있습니다.
CSS 변수를 설계 변수로 바꾸는 것을 원하지 않습니다. 우리는 당신이 두 가지를 모두 사용하기를 원합니다.
그렇기 때문에 Divi 5가 CSS 변수를 쉽게 정의하는 이유입니다. 일반 CSS에서와 마찬가지로 페이지 설정> 고급> 사용자 정의 CSS 내부에서 자신의 CSS 변수를 쉽게 선언 할 수 있습니다.
그러나 우리는 당신을 위해 그들의 응용 프로그램을 단순화합니다. 정의되면 해당 페이지에서 이러한 변수를 사용할 수 있습니다. 모든 모듈로 이동하여 Advanced Units 드롭 다운에서 CSS var를 선택하고 var () 함수 내에 변수 이름을 입력하십시오.
이 접근법은 시각적 설계 변수 시스템에 모든 것을 커밋하도록 강요하지 않고 필요할 때 유연성을 제공합니다. 그것은 구조와 창의적 자유 사이의 균형입니다.
Divi 5에서 CSS 변수 사용
Divi 5가 CSS 가변 워크 플로우를 쉽게 만드는 방법
이제 CSS 변수가 무엇인지, Divi 5가 시각적으로 어떻게 지원하는지 알았으므로 여기에 이것이 실제로 중요한 이유가 있습니다. Divi가 CSS 변수를 사용하는 두 가지 방법을 제공하기 때문이 아닙니다. 워크 플로와 부드럽게 통합하기 때문입니다.
설계 변수, 옵션 그룹 사전 설정 및 고급 장치와 같은 강력한 기능으로 CSS 변수를 쉽게 사용할 수 있습니다. 당신은 여전히 전통적인 CSS의 모든 유연성과 확장 성을 얻지 만 선택하지 않는 한 단일 줄의 코드를 작성하지 않습니다.
Divi 5 가이 워크 플로우를 생생하게하는 방법을 살펴 보겠습니다.
1. 디자인 프레임 워크를 만듭니다
디자인 변수는 전체 디자인 프레임 워크를 시각적으로 구축 할 수 있기 때문에 실제로 강력하므로 페이지 스타일링에는 몇 번의 클릭 만 필요합니다. 글꼴 크기, 간격 장치 및 브랜드 색상과 같은 기본 디자인 요소부터 시작하는 것이 좋습니다.
그런 다음 텍스트 문자열, URL 및 이미지와 같은 자주 사용되는 컨텐츠를 저장할 수도 있습니다. 예를 들어, 다른 섹션, 소셜 미디어 링크, 이메일, 주소 등을 반복하는 일반적인 배경 주제.
프레임 워크를 마련하면 모든 것이 더 쉬워집니다. 변수를 찾거나 정확한 이름을 기억하기 위해 루트 스타일 시트로 돌아갈 필요가 없습니다. Divi는 귀하를 위해 구성합니다 : 색상 탭의 색상, 글꼴 탭의 글꼴 및 변수 관리자 내부에서 액세스 할 수 있습니다.
또한 사이트에 디자인 업데이트가 필요한 경우 모듈로 모듈을 편집하거나 긴 스타일 시트를 통한 사냥을 낭비하지 않습니다. 변수 관리자 의 저장된 값을 한 번 업데이트하고 모든 인스턴스에서 변경 사항이 즉시 적용됩니다.
동일한 CSS 수준 컨트롤이지만 암기, 쓰기 또는 디버깅 할 필요가 없습니다.
2. 유연한 스타일을 위해 옵션 그룹 사전 설정을 사용하십시오
옵션 그룹 사전 설정은 디자인 시스템을보다 상세하게 제어 할 수 있습니다. 사이트 전체에 단일 스타일 세트를 적용하는 대신 동일한 기본 설계 변수로 구축 된 다양한 사용 사례에 대한 여러 디자인 선택 그룹을 만들 수 있습니다.
여기, 당신은 레이어링 스타일입니다. 변수 관리자에서 핵심 값을 한 번 정의한 다음 해당 값에서 가져 오지만 약간 다른 방식으로 적용하는 다른 사전 설정을 만듭니다. 저장된 변수 값을 업데이트 한 경우 변경 사항은 모든 사전 설정과 적용되는 모듈에 즉시 반영됩니다.
이 사전 설정 기반 설계 시스템은 무제한 스타일 조합을 만드는 데 도움이됩니다. 예를 들어, 동일한 글꼴 크기 변수를 사용하지만 다른 간격, 가중치 또는 텍스트 변환을 사용하는 홈페이지 영웅과 블로그 타이틀에 대한 제목 스타일이 하나있을 수 있습니다.
구조는 깨끗하게 유지됩니다. 스타일은 일관성이 있습니다. 필요한 경우 모듈 레벨에서 사전 설정을 무시할 수 있습니다. 따라서 창의적인 자유를 잃지 않고 시스템 전체의 제어를 얻습니다.
3. 더 많은 제어를 위해 사용자 정의 CSS 변수를 선언합니다
아시다시피, Divi는 고급 통제에서 벗어나지 않습니다. 자신의 CSS 변수를 정의하려면 페이지 설정> 고급> 사용자 정의 CSS를 통해 절대적으로 그렇게 할 수 있습니다. 그러나 그것은 재미있는 부분이 아닙니다.
재미있는 것은 Clamp () 및 Cal () (고급 단위 덕분)와 같은 강력한 CSS 기능을 사용하여 유체, 반응 형 레이아웃을 시각적으로 구축 할 수 있다는 것입니다. 저장된 CSS 변수를 설계 변수의 값으로 사용할 수도 있습니다.
이를 통해보다 상호 연결된 설계 시스템을 구축 할 수 있습니다. CSS 논리와 시각적 스타일은 더 이상 별도의 사일로에 존재하지 않습니다. CSS에서 한 번 값을 정의하고 필요한 곳에서 시각적으로 가져올 수 있습니다. 워크 플로우를 유체하고 확장 가능하며 유지 관리하기 쉽습니다.
당신은 이것을 모두 압도적으로 발견 할 수 있지만 일단 함께 작동하는 방식을 이해하면 되돌아 갈 수는 없습니다. 디자인, 생각 및 구축 방식이 바뀝니다. 변수 시스템으로 시작하는 것은 빠르게 디자인 언어가됩니다. 그렇습니다.이 도구는 강력하지만 프로세스를 중심으로 형성되어야합니다. 시간을내어 스타일에 맞는 것을 탐색하고 자신에게 맞는 워크 플로를 구축하십시오.
Divi는 CSS 변수에 대한 내장 접근 방식을 제공합니다
유연성과 복잡성을 선택하는 데 사용되는 CSS 변수로 설계합니다. Divi 5는이를 지우고 변수, 시각 제어, 사이트 전체 업데이트 및 계층 로직 의 전체 힘을 직관적이고 확장 가능한 워크 플로로 제공합니다.
사용자 정의 CSS와 No-Code 디자인 중에서 선택할 필요가 없습니다. 프로젝트가 커짐에 따라 시스템을 혼합, 일치 및 발전시킬 수 있습니다. 그리고 이것이 얼마나 매끄럽고 강력한 지 알면 다른 방식으로 건설을 상상하기가 어렵습니다. 그러나이를 위해서는 손에 통제해야합니다.
Divi 5를 직접 시도하고 당신과 반대하지 않고 당신과 함께 작동하는 디자인 시스템을 구축하십시오.