[css] CSS 변수 전역 변수

22 Dec 2023

CSS 변수는 CSS에 코드 내에서 재사용 가능한 값으로 저장할 수 있는 기능입니다. CSS 변수는 var() 함수를 사용하여 호출하고 재사용할 수 있습니다.

CSS 변수 선언

CSS 변수는 --로 시작하며, 이름을 정의한 후 값을 할당합니다.

예시:

:root {
  --main-color: #ff0000;
  --secondary-color: #00ff00;
}

위의 예시에서 :root 선택자는 HTML 문서 전체에 대한 스타일을 정의하는데 사용됩니다.

선언된 변수를 사용할 때에는 var() 함수를 사용하여 해당 변수를 호출합니다.

예시:

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

CSS 변수는 전역 변수로 사용될 수 있어, 한번 선언된 변수는 모든 부모와 자식 요소에 적용됩니다. 이는 코드의 유지보수 및 수정을 용이하게 만들어줍니다.

CSS 변수를 전역으로 사용하는 데에 따른 이점으로는 일관된 디자인을 유지할 수 있으며, 재사용 가능한 스타일을 적용할 수 있다는 것이 있습니다.

CSS 변수는 코드 내에서 재사용 가능한 값으로 선언하여 사용하는데 유용한 기능입니다. 전역 변수로 사용될 수 있어 다양한 스타일 요소에 일관된 디자인을 적용할 수 있습니다.

CSS custom properties (CSS 변수) - MDN Web Docs에서 CSS 변수 및 사용 방법에 대한 더 많은 정보를 확인할 수 있습니다.