본문으로 건너뛰기
실습하기

CSS 변수란?

CSS 변수는 CSS의 값을 저장하고 재사용하는 기능입니다. 이 변수들은 대부분 -- 접두사로 시작합니다.

예를 들어, 웹사이트에서 반복적으로 사용되는 특정 색상이 있다면, 이 색상 값을 변수에 저장하고 원할 때마다 그 변수를 사용하여 쉽게 접근할 수 있습니다.


사용 방법​

  1. 변수 선언: 변수는 주로 :root 또는 특정 선택자 내부에서 선언됩니다.
CSS
:root {
  --main-color: #ff4500;
}

위 코드에서 --main-color라는 변수에 #ff4500 색상을 저장했습니다.

  1. 변수 사용: 저장된 변수는 var() 함수를 통해 사용됩니다.
CSS
h1 {
  color: var(--main-color);
}

위 코드는 모든 h1 태그의 색상을 --main-color 변수에 저장된 값, 즉 #ff4500로 설정합니다.


장점​

  1. 재사용성: 한 번 변수에 값을 지정하면, 웹사이트의 여러 위치에서 동일한 값을 쉽게 사용할 수 있습니다.

  2. 유지 보수: 만약 디자인이 변경되어 특정 색상을 다른 색상으로 변경해야 한다면, 변수 값을 한 번만 바꾸면 됩니다. 이렇게 하면 해당 변수를 사용하는 모든 위치에서 값이 자동으로 업데이트됩니다.

  3. 적응성: CSS 변수는 JavaScript와 연동이 가능하므로, 동적으로 스타일을 변경하는데 유용합니다.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!