CSS 변수(Variable)와 컨테이너 쿼리(Container Query) 사용법

1. 개요

CSS 변수(CSS Custom Properties)와 컨테이너 쿼리(Container Query)는 현대적인 웹 개발에서 중요한 기능이다. CSS 변수는 CSS 스타일에서 값을 재사용할 수 있도록 하며, 컨테이너 쿼리는 특정 요소의 크기에 따라 스타일을 적용할 수 있도록 해준다.

CSS 변수는 유지보수성과 확장성을 높여주고, 테마 변경 같은 동적인 스타일링을 쉽게 구현할 수 있다. 반면 컨테이너 쿼리는 기존의 미디어 쿼리(Media Query)와 달리 부모 컨테이너 크기에 따라 스타일을 적용할 수 있어 더 정밀한 반응형 디자인을 구현할 수 있다.

이 글에서는 CSS 변수와 컨테이너 쿼리의 개념과 사용법을 자세히 살펴본다.

---

2. CSS 변수(Variable) 사용법

CSS 변수는 --변수이름 형식으로 정의하며, var(--변수이름)을 사용해 값을 참조할 수 있다.

css

복사편집

:root { --primary-color: #3498db; --font-size-large: 18px; } button { background-color: var(--primary-color); font-size: var(--font-size-large); color: white; padding: 10px 20px; border: none; border-radius: 5px; }

위 코드에서는 :root에 전역 변수를 정의하여 버튼 스타일에서 해당 변수를 재사용한다. 이를 통해 전체적인 색상이나 폰트 크기를 쉽게 관리할 수 있다.

(1) CSS 변수의 장점

• 유지보수 용이: 변수 값을 한 곳에서 변경하면 전체 스타일이 업데이트됨
• 재사용성 증가: 동일한 값이 여러 곳에서 사용될 때 중복 방지
• 동적 스타일 변경 가능: JavaScript와 결합하면 실시간으로 테마 변경 가능

(2) 지역 변수와 전역 변수

CSS 변수는 특정 요소 내에서도 정의할 수 있으며, 해당 요소의 하위 요소에서만 적용된다.

css

복사편집

.card { --card-bg: #f8f9fa; background-color: var(--card-bg); padding: 20px; border-radius: 8px; }

위 코드에서는 .card 내부에서 --card-bg 변수를 선언하여 해당 요소에만 적용되도록 한다.

(3) CSS 변수와 JavaScript 활용

JavaScript를 사용하면 CSS 변수 값을 동적으로 변경할 수 있다.

js

복사편집

document.documentElement.style.setProperty('--primary-color', '#e74c3c');

위 코드를 실행하면 --primary-color의 값이 빨간색(#e74c3c)으로 변경되며, 이를 적용하는 모든 요소의 색상이 실시간으로 바뀐다.

---

3. 컨테이너 쿼리(Container Query) 사용법

컨테이너 쿼리는 부모 요소(컨테이너)의 크기에 따라 스타일을 변경할 수 있는 기능이다. 기존 미디어 쿼리와 달리 뷰포트 크기가 아니라 컨테이너 크기를 기준으로 스타일을 적용할 수 있어 보다 정밀한 반응형 디자인을 구현할 수 있다.

(1) 컨테이너 쿼리 기본 문법

컨테이너 쿼리는 container-type을 설정한 요소를 기준으로 동작한다.

css

복사편집

.card-container { container-type: inline-size; } @container (max-width: 400px) { .card { background-color: lightgray; font-size: 14px; } }

위 코드에서는 .card-container를 컨테이너로 설정하고, .card 요소가 포함된 컨테이너의 크기가 400px 이하일 때 스타일을 변경한다.

(2) 컨테이너 타입 설정

컨테이너를 사용하려면 container-type 속성을 설정해야 한다.

css

복사편집

.container { container-type: inline-size; }

• container-type: inline-size; → 가로 크기를 기준으로 스타일을 적용
• container-type: size; → 가로 및 세로 크기 모두를 기준으로 스타일 적용

(3) 컨테이너 쿼리 활용 예제

아래 예제는 컨테이너 크기에 따라 카드의 레이아웃을 변경하는 코드이다.

css

복사편집

.card-container { container-type: inline-size; display: flex; gap: 10px; } .card { flex: 1; padding: 20px; border: 1px solid #ddd; background-color: white; } /* 컨테이너가 600px 이하일 때 카드의 배경색 변경 */ @container (max-width: 600px) { .card { background-color: #f0f0f0; } }

위 코드에서는 .card-container의 크기가 600px 이하로 줄어들면 .card의 배경색이 변경된다.

 

 

---

4. CSS 변수와 컨테이너 쿼리의 조합

CSS 변수와 컨테이너 쿼리를 조합하면 더욱 유연한 반응형 디자인을 구현할 수 있다.

css

복사편집

.card-container { container-type: inline-size; --card-bg: #ffffff; } .card { background-color: var(--card-bg); padding: 20px; } /* 컨테이너 크기가 500px 이하일 때 변수 값 변경 */ @container (max-width: 500px) { .card-container { --card-bg: #f8f9fa; } }

위 코드에서는 컨테이너 크기에 따라 --card-bg 변수 값을 변경하여 .card의 배경색을 동적으로 조절한다.

---

5. 결론

CSS 변수와 컨테이너 쿼리는 현대적인 웹 개발에서 필수적인 기술이다.

• CSS 변수를 사용하면 스타일을 쉽게 재사용하고 유지보수할 수 있으며, JavaScript와 결합하면 동적인 테마 변경이 가능하다.
• 컨테이너 쿼리를 활용하면 미디어 쿼리보다 정밀하게 반응형 디자인을 적용할 수 있어 복잡한 UI에서도 유용하다.

이 두 가지 기술을 함께 활용하면 더 효율적이고 유연한 웹 디자인을 구현할 수 있다. 앞으로 CSS의 발전과 함께 컨테이너 쿼리가 더 널리 사용될 것으로 기대된다.