CSS 변수란 무엇인가요?

Q1: CSS 변수란 무엇인가요?
A1: CSS 변수는 CSS 코드 내에서 값을 재사용할 수 있도록 이름을 부여한 사용자 정의 속성입니다. 이를 통해 동일한 값을 여러 곳에서 쉽게 관리하고 변경할 수 있습니다.

Q2: CSS 변수는 어떻게 선언하나요?
A2: CSS 변수는 일반적으로 선택자 안에서 `--`로 시작하는 이름으로 선언합니다. 예를 들어:
```css
:root {
--main-color: 3498db;
}
```

Q3: CSS 변수는 어떻게 사용하나요?
A3: `var()` 함수를 사용하여 변수 값을 참조합니다. 예를 들어, 위에서 선언한 `--main-color`를 사용하려면:
```css
h1 {
color: var(--main-color);
}
```

Q4: CSS 변수의 장점은 무엇인가요?
A4:
- 값 재사용성 증가로 코드 중복 감소
- 유지보수 및 디자인 변경 시 효율적
- 동적 값 계산 및 조건부 스타일 적용 가능
- 상속을 통해 특정 요소 및 하위 요소에 적용 가능

Q5: CSS 변수의 유효 범위(scope)은 어떻게 되나요?
A5: 변수는 선언된 선택자와 그 하위 요소들에게 상속됩니다. 예를 들어 `:root`에 선언하면 전역 변수로 사용되며, 특정 클래스 내에 선언하면 해당 클래스와 하위 요소에만 적용됩니다.

Q6: CSS 변수에 기본값을 지정할 수 있나요?
A6: 네, `var()` 함수 내에서 두 번째 인자로 기본값을 지정할 수 있습니다. 예: ```css
color: var(--non-existent-variable, black);
```

Q7: CSS 변수는 어느 버전의 CSS부터 지원되나요?
A7: CSS Custom Properties는 CSS Variables Level 1 명세에 포함되어 있으며, 최신 주요 브라우저에서 모두 지원합니다. (대략 2017년 이후 대부분 지원)

Q8: CSS 변수와 전통적인 CSS 전처리기 변수(Sass, Less 등)와의 차이점은?
A8:
- CSS 변수는 런타임에 해석되어 브라우저에서 동적으로 적용된다.
- 전처리기 변수는 빌드 단계에서 CSS 파일 생성 시 값이 치환된다.
- CSS 변수는 상속 및 동적 재지정 가능, 전처리기 변수는 그렇지 않음.

Q9: CSS 변수에 수학 연산을 적용할 수 있나요?
A9: CSS 변수 자체는 직접 연산을 지원하지 않지만, CSS `calc()` 함수와 함께 사용하면 가능합니다. 예:
```css
width: calc(var(--base-width) * 2);
```

Q10: CSS 변수는 자바스크립트에서 접근할 수 있나요?
A10: 네, 자바스크립트 `getComputedStyle()` 메서드로 요소에 적용된 변수 값을 읽을 수 있고, `style.setProperty()`로 값도 변경 가능합니다.
예:
```js
const root = document.documentElement;
const mainColor = getComputedStyle(root).getPropertyValue('--main-color');
root.style.setProperty('--main-color', ' e74c3c');
```

---

위 내용을 참고하면 CSS 변수의 기본 개념부터 활용법 및 장점까지 폭넓게 이해할 수 있습니다.

CSS 변수, 또는 커스텀 프로퍼티(Custom Property)는 CSS에서 사용자 정의 값을 저장하고 재사용할 수 있도록 해주는 기능입니다.

CSS 변수는 `--`로 시작하는 이름을 가지며, 이를 통해 스타일 시트를 더욱 유연하고 유지보수하기 쉽게 만들어 줍니다.

CSS 변수의 기본 문법 CSS 변수는 다음과 같은 방식으로 선언하고 사용할 수 있습니다: 1. 선언 : CSS 변수는 보통 `:root` 선택자 내에서 선언됩니다.

`:root`는 문서의 최상위 요소인 `` 요소를 가리킵니다.

이를 통해 전역적으로 변수를 사용할 수 있습니다.

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

2. 사용 : 선언된 CSS 변수는 `var()` 함수를 사용하여 적용할 수 있습니다.

```css body { background-color: var(--main-color); font-size: var(--font-size); } ``` CSS 변수의 장점 1. 재사용성 : CSS 변수를 사용하면 동일한 값을 여러 곳에서 재사용할 수 있습니다.

이를 통해 코드의 중복을 줄이고, 스타일을 일관되게 유지할 수 있습니다.



2. 유지보수 용이성 : 변수의 값을 한 곳에서 변경하면 이를 사용하는 모든 스타일에 자동으로 반영됩니다.

예를 들어, 기본 색상을 변경하고 싶을 때 `--main-color`의 값만 수정하면 됩니다.



3. 동적 변경 : CSS 변수는 JavaScript와 함께 사용할 수 있어, 런타임 중에 동적으로 스타일을 변경할 수 있습니다.

이는 사용자 인터페이스에서 사용자 경험을 개선하는 데 유용합니다.

```javascript document.documentElement.style.setProperty('--main-color', ' e74c3c'); ```

4. 미디어 쿼리와의 통합 : CSS 변수는 미디어 쿼리 내에서도 사용할 수 있어, 반응형 디자인을 구현하는 데 유리합니다.

```css @media (max-width: 600px) { :root { --font-size: 14px; } } ``` CSS 변수의 제한 사항 1. 상속 : CSS 변수는 기본적으로 상속됩니다.

이는 변수의 값을 부모 요소에서 정의하면 자식 요소에서도 사용할 수 있다는 것을 의미합니다.

그러나 이로 인해 의도치 않은 스타일이 적용될 수 있으므로 주의가 필요합니다.



2. 브라우저 호환성 : 대부분의 최신 브라우저는 CSS 변수를 지원하지만, 구형 브라우저에서는 지원하지 않을 수 있습니다.

따라서, 호환성 문제를 고려해야 할 때는 폴리필이나 대체 방법을 사용할 수 있습니다.



3. 정적 값과의 혼합 : CSS 변수는 정적 값과 혼합하여 사용할 수 있지만, 정적 값은 변하지 않기 때문에 변수의 유연성을 활용하지 못할 수 있습니다.

따라서, 가능한 한 변수를 활용하는 것이 좋습니다.

결론 CSS 변수는 현대 웹 개발에서 매우 유용한 도구로 자리 잡았습니다.

이를 통해 스타일 시트를 더욱 효율적으로 관리하고, 사용자 경험을 개선할 수 있습니다.

CSS 변수를 적절히 활용하면 코드의 가독성과 유지보수성을 높일 수 있으며, 다양한 디자인 요구 사항에 쉽게 대응할 수 있습니다.

따라서, CSS 변수를 적극적으로 사용하여 더 나은 웹 디자인을 구현하는 것이 중요합니다.