CSS 고급 기초

CSS CSS 변수 심화

CSS CSS 변수 심화 — 고급

CSS 변수 심화

1. 도입 (왜 배워야 하는가)

CSS 변수(또는 커스텀 속성)는 웹 디자인과 개발에서 매우 중요한 도구입니다. 실무에서는 스타일의 일관성을 유지하고, 코드의 재사용성을 높이며, 유지보수를 용이하게 만들어줍니다. CSS 변수를 사용하지 않으면, 여러 곳에서 동일한 값을 반복적으로 작성해야 하며, 나중에 스타일을 수정할 때마다 모든 코드를 찾아 수정해야 하는 번거로움이 발생할 수 있습니다. 이는 시간이 많이 소요되고 실수의 가능성을 높입니다. 따라서 CSS 변수를 잘 이해하고 활용하는 것은 효율적인 웹 개발에 필수적입니다.

2. 핵심 개념 설명

CSS 변수는 --로 시작하는 사용자 정의 속성으로, CSS에서 재사용 가능한 값들을 정의할 수 있게 해줍니다. 이를 통해 유지보수와 일관성을 높일 수 있습니다.

용어	설명
커스텀 속성	CSS 변수를 정의할 때 사용하는 속성으로 `--`로 시작합니다.
전역 변수	모든 CSS 규칙에서 접근할 수 있는 변수입니다.
지역 변수	특정 선택자 내에서만 사용 가능한 변수입니다.

3. 기본 코드 예제

아래는 CSS 변수를 정의하고 사용하는 가장 기본적인 예제입니다.

:root {
    --main-color: #3498db; / 기본 색상 변수 정의 /
}

body {
    background-color: var(--main-color); / 변수 사용 /
    color: white; / 텍스트 색상 /
}

실행 결과: 이 코드는 배경색을 파란색으로 설정하고, 텍스트 색상을 흰색으로 지정합니다.

:root { ... } : CSS 변수의 범위를 전역으로 설정합니다.
--main-color: #3498db; : --main-color라는 이름의 변수를 정의하고, 파란색 값을 할당합니다.
background-color: var(--main-color); : 정의된 변수를 사용하여 배경색을 설정합니다.

4. 실전 활용 예제

예제 1: 테마 전환

쇼핑몰에서 다크 모드와 라이트 모드를 구현할 때 유용합니다.

:root {
    --background-color: white;
    --text-color: black;
}

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

.dark-mode {
    --background-color: black;
    --text-color: white;
}

상황 설명: 사용자가 버튼을 클릭하여 .dark-mode 클래스를 추가하면, 배경색과 텍스트 색상이 변경됩니다.

예제 2: 반응형 디자인

다양한 화면 크기에서 레이아웃을 조정할 때 활용할 수 있습니다.

:root {
    --padding: 16px;
}

.container {
    padding: var(--padding);
}

@media (max-width: 600px) {
    :root {
        --padding: 8px; / 화면 크기에 따라 패딩 변경 /
    }
}

상황 설명: 화면 크기가 600px 이하일 때 패딩을 줄여서 레이아웃을 조정합니다.

5. 흔한 실수와 주의사항

실수 1: 변수 이름을 잘못 사용

:root {
    --main-color: #3498db;
}

body {
    background-color: var(--main-color); / 올바른 사용 /
    background-color: var(main-color); / 잘못된 사용: --가 없음 /
}

실수 2: 변수를 정의하지 않고 사용하기

body {
    background-color: var(--undefined-color); / 정의되지 않은 변수 사용 /
}

6. 정리

CSS 변수는 코드의 재사용성을 높여주고 유지보수를 용이하게 해줍니다.
변수를 정의할 때는 --로 시작하며, var() 함수로 사용합니다.
지역 변수와 전역 변수를 적절히 활용하여 코드의 범위를 조절합니다.

다음에 학습하면 좋은 주제는 CSS Grid와 Flexbox입니다. 이 두 가지 기술은 레이아웃을 구성하는 데 매우 유용하며, CSS 변수를 활용하여 더욱 강력한 반응형 디자인을 만들 수 있습니다.

학습