CSS 변수 – 동적이고 사용자 정의 가능한 디자인 효과를 생성하는 능력은 웹 개발 분야에서 필수적입니다. 사용자 정의 속성 또는 CSS 변수는 개발자가 스타일시트 내에서 재사용 가능한 값을 지정하고 런타임 중에 동적으로 수정할 수 있도록 하는 이 영역에 대한 방법을 제공합니다. 이 블로그 게시물에서는 동적 기능을 강조하는 실제 예를 통해 CSS 변수를 살펴보겠습니다.

CSS 변수 이해
스타일시트의 재사용 가능한 값은 CSS 변수를 사용하여 전체적으로 정의하고 사용할 수 있습니다. 일반적으로 글로벌 가용성을 위해 :root 의사 클래스 내에서 — 접두사 뒤에 이름을 사용하여 선언됩니다. 글꼴, 색상, 너비, 높이 등과 같은 값을 저장하는 데 사용할 수 있습니다. 이러한 변수는 CSS 코드에 정의되면 다른 파일에서도 사용할 수 있습니다.(자세히 보기)

CSS 변수는 다음과 같이 정의됩니다.

:root {
  --main-color: #3498db;
}

이 예에서는 –main-color라는 변수를 정의했으며 해당 값은 #3498db입니다. CSS 코드의 어디에서나 변수에 액세스할 수 있도록 보장하는 :root 의사 클래스 내에 이를 선언했습니다.

CSS 변수 사용 방법
정의한 후에는 var() 함수를 사용하여 CSS 변수에 액세스하여 CSS 코드의 어느 곳에서나 CSS 변수를 사용할 수 있습니다.

Var():

CSS 변수 var()를 사용하면 사용자 정의 속성 값을 입력하여 다른 속성 값의 일부를 바꿀 수 있습니다.

구문:

var(--custom-property);

예 :

.element {
  color: var(--main-color);
}

이 예에서는 –main-color 변수를 사용하여 요소의 텍스트 색상을 설정합니다. 나중에 기본 색상을 변경하기로 결정한 경우 변수 값을 업데이트하면 해당 변수가 사용되는 모든 요소에 자동으로 반영됩니다.

1.동적 테마 색상 만들기
산출

테마 색상이 동적으로 변경되는 웹페이지를 디자인하고 싶은 상황을 생각해 보세요. 사용자에게 버튼을 클릭하면 페이지의 전체 색 구성표 변경을 볼 수 있는 옵션을 제공할 수 있기를 원합니다. CSS 변수가 이를 어떻게 가능하게 하는지 살펴보겠습니다.(CSS 변수에 대해 자세히 알아보기)

HTML:

  
Dynamic Theme - CSS Variables
  
Change Theme Color

  

CSS:

:root {
  --primary-color: #3498db;
}

.header {
  background-color: var(--primary-color);
  color: white;
  padding: 20px;
  text-align: center;
}

button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  margin: 20px;
  border-radius: 5px;
}

자바스크립트:

document.getElementById('changeColorBtn').addEventListener('click', function() {
  // Generate a random hex color
  var randomColor = '#'   Math.floor(Math.random()*16777215).toString(16);

  // Set the random color as the new primary color
  document.documentElement.style.setProperty('--primary-color', randomColor);
});

이 예는 버튼과 헤더가 있는 웹페이지를 보여줍니다. 버튼의 배경색과 헤더는 기본값이 #3498db인 –primary-color CSS 변수를 사용하여 사용자 정의됩니다. JavaScript 스크립트는 버튼을 클릭하면 임의의 16진수 색상 코드를 생성한 다음 –primary-color 변수의 새 값으로 할당됩니다. 그 결과, 버튼과 헤더의 테마 색상이 동적으로 변경되면서 사용자에게 흥미롭고 인터랙티브한 경험이 제공됩니다.

결론
웹 개발에서 CSS 변수는 스타일을 관리하는 다양하고 효과적인 방법을 제공합니다. 재사용 가능한 값을 정의하고 이를 동적으로 적용함으로써 개발자는 유지 관리가 용이하고 사용자 정의가 가능한 웹 사이트를 만들 수 있습니다. CSS 변수는 테마, 반응성 또는 애니메이션에 중점을 두고 온라인 프로젝트의 스타일 기능을 향상시키는 광범위한 도구 세트를 제공합니다. 디자인에서 이를 완전히 활용하려면 CSS 작업 흐름에 통합을 시작하세요!(CSS 변수에 대해 자세히 알아보기)