대부분의 웹사이트는 CSS를 활용하여 시각적인 디자인을 꾸미고, 다양한 웹 페이지 요소들의 스타일을 지정합니다. CSS(Cascading Style Sheet)는 엄밀히 말해 프로그래밍 언어는 아니지만, JavaScript와 같은 프로그래밍 언어와 함께 사용되어 반응형 및 상호작용적인 웹 페이지를 만드는 데 중요한 역할을 합니다.
만약 여러분이 JavaScript와 같은 프로그래밍 언어를 사용해 본 경험이 있다면, 변수를 선언하고 값을 할당하여 코드의 여러 부분에서 재사용할 수 있다는 것을 이미 알고 있을 겁니다. 좋은 소식은 CSS에서도 이러한 개념을 적용할 수 있다는 것입니다.
이 글에서는 CSS 변수를 정의하고 그 이점을 설명하며, CSS에서 변수를 선언하고 실제로 사용하는 방법을 자세히 알아보겠습니다.
CSS 변수란 무엇인가?
CSS 변수는 웹 개발자가 스타일 시트 내에서 반복적으로 사용할 수 있는 값을 저장하는 사용자 정의 속성입니다. 예를 들어, 글꼴 스타일, 배경색, 글꼴 크기와 같은 스타일 속성을 변수로 선언하여 제목, 단락, div 요소 등 다양한 요소에서 재사용할 수 있습니다.
CSS 변수를 사용하는 이유는 무엇일까요? 그 이유는 다음과 같습니다.
- 코드 업데이트 용이성: 변수를 선언하면 모든 요소를 수동으로 수정하지 않고도 전체 스타일시트의 값을 일괄적으로 업데이트할 수 있습니다.
- 반복 감소: 코드베이스가 커질수록 비슷한 스타일의 클래스와 요소들이 많아지게 됩니다. 모든 항목에 대해 CSS 코드를 일일이 작성하는 대신, CSS 변수를 활용하여 코드의 중복을 줄일 수 있습니다.
- 코드 유지보수 용이성: 코드 유지보수는 비즈니스 지속 가능성에 매우 중요합니다. CSS 변수를 사용하면 코드를 체계적으로 관리하고 수정하기 쉬워집니다.
- 가독성 향상: 현대 사회에서는 협업이 필수적입니다. CSS 변수는 코드를 간결하고 읽기 쉽게 만들어 협업 효율성을 높입니다.
- 손쉬운 일관성 유지: CSS 변수를 사용하면 프로젝트 규모가 커지더라도 일관된 스타일을 유지할 수 있습니다. 예를 들어, 웹사이트 전체에서 버튼에 사용할 여백, 패딩, 글꼴 스타일 및 색상을 변수로 정의하여 일관된 디자인을 유지할 수 있습니다.
CSS에서 변수를 선언하는 방법
이제 CSS 변수가 무엇인지, 왜 사용해야 하는지 이해했으므로 변수를 선언하는 방법을 살펴보겠습니다.
CSS 변수를 선언하려면 먼저 요소 이름을 지정한 다음, 두 개의 대시(–)를 붙이고, 원하는 변수 이름과 값을 차례로 작성합니다. 기본적인 구문은 다음과 같습니다.
element {
--variable-name: value;
}
예를 들어, 전체 문서에 동일한 패딩을 적용하고 싶다면 다음과 같이 변수를 선언할 수 있습니다.
body {
--padding: 1rem;
}
CSS 변수의 범위
CSS 변수는 로컬(특정 요소 내에서만 접근 가능) 또는 전역(전체 스타일 시트에서 접근 가능)으로 범위를 지정할 수 있습니다.
지역 변수
지역 변수는 특정 선택자에 연결되어 해당 선택자 내부에서만 사용할 수 있습니다. 예를 들어, 버튼 요소에만 적용되는 배경색 변수를 다음과 같이 선언할 수 있습니다.
.button {
--button-bg-color: #33ff4e;
}
이 경우, `–button-bg-color` 변수는 `.button` 선택자와 그 하위 요소에서만 사용할 수 있습니다.
전역 변수
전역 변수는 한 번 선언하면 코드 내의 모든 요소에서 사용할 수 있습니다. 전역 변수를 선언하려면 `:root` 의사 클래스를 사용합니다. 다음과 같이 선언할 수 있습니다.
:root {
--primary-color: grey;
--secondary-color: orange;
--font-weight: 700;
}
위 코드에서 정의된 변수들은 제목, 단락, div 요소 등 스타일 시트 내의 모든 요소에서 자유롭게 사용할 수 있습니다.
CSS에서 변수를 사용하는 방법
실제로 변수를 사용하는 방법을 알아보기 위해 간단한 프로젝트를 만들어 보겠습니다. `index.html` 파일과 `styles.css` 파일을 준비합니다.
`index.html` 파일에는 두 개의 제목(`h1` 및 `h2`)과 하나의 단락(`p`)을 포함하는 간단한 `div` 요소를 추가합니다.
<div> <h1>Hello Front-end Dev!!!!</h1> <h2>This is how to use variables in CSS.</h2> <p> Keep scrolling</p> </div>
`styles.css` 파일에는 다음 코드를 추가합니다.
:root {
--primary-color: grey;
--secondary-color: orange;
--font-weight: 700;
--font-size: 16px;
--font-style: italic;
}
body {
background-color: var(--primary-color);
font-size: var(--font-size);
}
h1 {
color: var(--secondary-color);
font-style: var(--font-style)
}
h2 {
font-weight: var(--font-weight)
}
p {
font-size: calc(var(--font-size) * 1.2);
}
웹 페이지를 렌더링하면 다음과 같은 결과를 볼 수 있습니다.
위 코드에서는 `:root` 요소에 전역 변수를 선언했습니다. 전역 변수를 사용하려면 `var()` 키워드를 사용해야 합니다. 예를 들어, 전역 변수로 선언된 배경색을 적용하기 위해 다음과 같이 코드를 작성했습니다.
`background-color: var(–primary-color);`
다른 요소에서도 `var()` 키워드를 사용하여 변수를 사용하는 방법을 확인할 수 있습니다.
JavaScript와 함께 CSS 변수 사용
JavaScript에서 CSS 변수를 사용하는 방법을 보여드리기 위해 지역 변수와 전역 변수를 모두 활용하겠습니다.
기존 코드에 경고 요소를 추가해 보겠습니다.
새로운 `index.html` 파일은 다음과 같습니다.
<div> <h1>Hello Front-end Dev!!!!</h1> <h2>This is how to use variables in CSS.</h2> <p> Keep scrolling</p> </div> <div class="alert">Click me!</div>
변수를 사용하여 경고 요소의 스타일을 지정해 보겠습니다. 기존 CSS 코드에 다음 코드를 추가합니다.
.alert {
--bg-color: red; /* 지역 변수 정의 */
background-color: var(--bg-color); /* 배경색에 지역 변수 사용 */
padding: 10px 20px;
border-radius: 4px;
font-weight: var(--font-weight); /* 글꼴 두께에 전역 변수 사용 */
width: 50px;
}
여기서 다음과 같은 작업을 수행했습니다.
- 경고 요소 내부에서 `–bg-color`라는 지역 변수를 정의했습니다.
`–bg-color: red;`
- `var()` 키워드를 사용하여 이 지역 변수에 접근하여 배경색에 적용했습니다.
`background-color: var(–bg-color);`
- 이전에 `font-weight`로 선언한 전역 변수를 가져와서 글꼴 두께에 적용했습니다.
`font-weight: var(–font-weight);`
자바스크립트 코드 추가
경고 요소를 인터랙티브하게 만들어 보겠습니다. 경고 요소를 클릭하면 브라우저에 “우리는 JavaScript와 함께 CSS 변수를 사용했습니다!!!!”라는 메시지를 표시하는 팝업 창이 뜨도록 할 것입니다.
JavaScript 코드를 HTML 코드에 직접 추가하려면 <script> 태그를 사용하면 됩니다. JavaScript 코드는 HTML 코드 뒤에 와야 하며, </body> 태그를 닫기 전에 작성해야 합니다.
다음 코드를 추가합니다.
<script>
const alertDiv = document.querySelector('.alert');
alertDiv.addEventListener('click', function() {
window.alert("We have used CSS Variables with JavaScript!!!!");
});
</script>
이제 HTML 코드는 다음과 같아야 합니다.
JavaScript 코드는 다음과 같은 작업을 수행합니다.
- `document.querySelector()`를 사용하여 경고 요소를 찾습니다.
- 경고 요소를 `alertDiv` 변수에 할당합니다.
- `alertDiv` 요소에 `addEventListener()` 메서드를 사용하여 ‘클릭’ 이벤트를 추가합니다.
- 클릭 이벤트가 발생하면 `window.alert()`를 사용하여 메시지를 표시합니다.
페이지를 렌더링하면 다음과 같이 표시됩니다.
경고 알림을 클릭하면 다음 메시지가 표시됩니다.
CSS 변수의 폴백 값
스타일 시트에 정의되지 않은 변수를 참조하면 어떻게 될까요? 이 경우, 해당 스타일 속성은 적용되지 않습니다. 폴백 값은 참조되지 않은 변수 대신 적용될 대체 스타일 값을 제공합니다.
폴백 값은 다음과 같은 상황에서 유용합니다.
- 특정 브라우저가 CSS 변수를 이해하지 못하는 경우, 대체 스타일 값을 제공하여 스타일이 깨지는 현상을 방지할 수 있습니다.
- CSS 변수로 인해 페이지가 예상대로 작동하지 않는다고 의심되는 경우, 폴백 값을 사용하여 변수의 오류 여부를 테스트할 수 있습니다.
쉼표로 구분하여 둘 이상의 대체 속성을 지정할 수 있습니다. 다음 코드를 예시로 살펴보겠습니다.
:root {
--primary-color: #007bff;
}
.btn {
background-color: var(--primary-color, red, yellow);
padding: 10px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
전역 변수를 사용할 때, 변수 이름의 철자를 잘못 입력하면, 해당 변수는 정의되지 않은 것으로 간주되어 폴백 값인 `red`가 적용됩니다.
다음 코드를 통해 더 자세히 이해할 수 있습니다.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:root {
--primary-color: #007bff;
}
.btn {
background-color: var(--primary-color, red);
padding: 10px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<button class="btn">Click me!</button>
</body>
</html>
브라우저에서 위의 코드를 렌더링하면 다음과 같이 표시됩니다.
그러나 동일한 코드에서 버튼 선택기의 변수 이름 철자를 약간 변경하면 다음과 같이 됩니다.
.btn {
background-color: var(--primary-colr, red); /* primary-color의 철자를 primary-colr로 잘못 입력했습니다. */
padding: 10px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
이제 브라우저는 다음과 같이 렌더링합니다.
CSS에서 동적 값 및 계산된 값 변수 사용
동적 값은 사용자 입력과 같은 특정 이벤트 또는 조건에 따라 자동으로 업데이트되는 값입니다.
다음 코드를 통해 동적 값 변수의 사용 방법을 알아봅시다.
<html>
<head>
<meta charset="UTF-8">
<title>CSS Variables with JavaScript</title>
<style>
:root {
--color: #333;
}
#color-input {
margin-left: 1em;
}
#color-input {
--color: var(--color-input);
}
</style>
</head>
<body>
<label for="color-input">Choose a color:</label>
<input type="color" id="color-input">
</body>
</html>
위의 코드는 다음과 같은 기능을 수행합니다.
- `:root` 선택자를 사용하여 기본값 `#333`으로 변수 `–color`를 선언합니다.
- `#color-input`을 사용하여 입력 요소를 선택합니다.
- `–color`의 값은 `var(–color-input)`로 설정되어, 사용자가 색상 선택기를 사용하여 새로운 색상을 선택할 때마다 색상이 실시간으로 업데이트됩니다.
계산된 값은 다른 속성 또는 변수를 기반으로 계산을 수행하여 얻는 값입니다. 다음 코드를 통해 계산된 값 변수의 사용 방법을 알아보겠습니다.
:root {
--base-font-size: 14px;
--header-font-size: calc(var(--base-font-size) * 3);
}
h2 {
font-size: var(--header-font-size);
}
위 코드 블록에서 다음 사항을 확인할 수 있습니다.
- 기본 글꼴 크기를 정의하는 `–base-font-size` 변수가 있습니다.
- `–base-font-size` 값의 3배로 계산되는 `–header-font-size` 변수가 있습니다.
- `–header-font-size`와 함께 `var()`를 사용하는 `h1` 선택자가 있습니다.
- 따라서 웹 페이지의 모든 `h1` 요소는 `–base-font-size` 크기의 3배 크기로 표시됩니다.
마무리
이제 CSS 변수를 사용하여 개발 프로세스를 가속화하고 유지보수가 용이한 코드를 작성하는 방법을 이해하셨을 겁니다. 사용자 정의 변수는 HTML 및 React와 같은 라이브러리에서도 사용할 수 있습니다. React에서 CSS를 사용하여 스타일을 지정하는 다양한 접근 방식을 확인해 보세요.
여기에서 소스 코드를 확인할 수 있습니다.