[CSS] CSS 변수 사용법(CSS 사용자 정의)

웹 개발을 하다 보면 반복적으로 동일한 색상, 글꼴 크기, 간격 등을 설정해야 할 때가 많습니다. 이럴 때 유용하게 활용할 수 있는 것이 바로 **CSS 변수(CSS Custom Properties)**입니다. CSS 변수는 웹 스타일링 작업의 효율성을 높이고, 유지보수를 쉽게 만들어주는 강력한 도구입니다.

---

1. CSS 변수란 무엇인가요?

CSS 변수는 값을 재사용하기 위해 선언할 수 있는 사용자 정의 프로퍼티입니다. CSS 변수는 --로 시작하며, var() 함수를 사용해 참조합니다. 이를 통해 코드의 가독성을 높이고, 유지보수를 간편하게 할 수 있습니다.

예:

:root {
  --main-color: #3498db;
  --font-size: 16px;
}

---

2. CSS 변수 선언하기

CSS 변수는 일반적으로 :root 선택자 내에서 선언합니다. :root는 문서의 최상위 요소를 나타내며, 이렇게 선언된 변수는 전체 문서에서 사용할 수 있습니다.

:root {
  --primary-color: #ff5722;
  --secondary-color: #4caf50;
  --default-padding: 20px;
}

---

3. CSS 변수 사용하기

CSS 변수를 사용하려면 var() 함수를 활용합니다. 이를 통해 선언된 변수를 다양한 CSS 속성에서 호출할 수 있습니다.

button {
  background-color: var(--primary-color);
  color: white;
  padding: var(--default-padding);
  border-radius: 5px;
}

---

4. CSS 변수의 장점

1. 유지보수성 향상: 변수값을 한 곳에서 변경하면 전체 코드에 반영됩니다.
2. 반복 코드 감소: 동일한 값의 반복 사용을 줄일 수 있습니다.
3. 다양한 활용성: 반응형 디자인 및 테마 변경 등에 유용합니다.

---

5. CSS 변수 활용 예제

1) 다크 모드와 라이트 모드 스타일링

CSS 변수는 테마 설정에 유용합니다.

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

[data-theme="dark"] {
  --bg-color: #000000;
  --text-color: #ffffff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

2) 반응형 디자인에서 사용

:root {
  --font-size: 16px;
}

@media (max-width: 768px) {
  :root {
    --font-size: 14px;
  }
}

p {
  font-size: var(--font-size);
}

---

6. CSS 변수 사용 시 주의사항

1. IE11 지원 제한: CSS 변수는 최신 브라우저에서만 지원됩니다. IE11과 같은 구형 브라우저에서는 사용할 수 없습니다.
2. 스코프 관리: CSS 변수는 선언된 범위에서만 동작하므로 스코프를 이해하고 활용해야 합니다.

---

7. CSS 변수로 더 나은 웹 디자인을 만들어보세요!

CSS 변수는 코드를 더욱 깔끔하고 관리하기 쉽게 만들어줍니다. 특히, 대규모 프로젝트나 반복 작업이 많은 스타일링 작업에서 그 진가를 발휘합니다. 오늘 배운 내용을 바탕으로, CSS 변수를 활용해 효율적인 웹 스타일링을 시도해 보세요!

궁금하신게 있으시면 댓글 달아주세요.
이 글이 도움이 되었다면 ♡(공감), 광고 눌러 주세요.
큰 도움이 됩니다.