CSS 입문 기초

CSS CSS 변수 (custom properties)

CSS CSS 변수 (custom properties) — 초급

CSS 변수 (Custom Properties)

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

CSS 변수, 또는 커스텀 프로퍼티는 웹 개발에서 매우 중요한 개념입니다. 이 기능을 통해 스타일 시트를 더욱 효율적으로 관리하고, 유지 보수가 용이한 코드를 작성할 수 있습니다. 특히, 여러 곳에서 반복적으로 사용되는 색상, 폰트 크기, 간격 등의 값을 변수로 정의하면, 나중에 스타일을 수정할 때 각각의 값을 일일이 찾아 바꿀 필요가 없어집니다.

예를 들어, 쇼핑몰 웹사이트에서 버튼의 배경색을 변경하고 싶다면, CSS 변수로 설정해두었다면 한 줄만 수정하면 됩니다. 반면, 변수가 없다면 버튼이 사용된 모든 곳의 색상을 찾아 수정해야 하며, 이 과정에서 실수할 가능성도 높아집니다.

2. 핵심 개념 설명

CSS 변수는 --로 시작하는 이름을 가진 속성입니다. 이 변수는 CSS에서 언제든지 재사용할 수 있습니다. 변수를 사용하는 것은 마치 메뉴판에서 자주 사용되는 재료를 미리 준비해 두고, 요리할 때마다 꺼내 쓰는 것과 비슷합니다. 변수를 통해 코드의 일관성을 유지하고, 수정 시 편리함을 제공합니다.

용어	설명
커스텀 프로퍼티	CSS 변수를 의미하며, `--`로 시작하는 이름을 가짐
var()	정의된 CSS 변수를 사용하는 함수

3. 기본 코드 예제

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

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

body {
    background-color: var(--main-color); / 변수 사용 /
}

실행 결과: 배경색이 파란색(#3498db)으로 설정됩니다.

:root : 전체 문서의 루트 요소를 선택하여 변수를 정의합니다.
--main-color: #3498db; : --main-color라는 이름의 변수를 정의하고, 파란색 값을 할당합니다.
background-color: var(--main-color); : var() 함수를 사용해 정의한 변수를 불러와 배경색으로 설정합니다.

4. 실전 활용 예제

예제 1: 버튼 스타일링

쇼핑몰에서 장바구니 버튼을 스타일링할 때, 다음과 같이 변수를 사용할 수 있습니다.

:root {
    --button-color: #e74c3c; / 버튼 색상 /
    --button-hover-color: #c0392b; / 버튼 호버 색상 /
}

.button {
    background-color: var(--button-color);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
}

.button:hover {
    background-color: var(--button-hover-color); / 호버 시 색상 변경 /
}

예제 2: 텍스트 스타일링

웹사이트의 텍스트 스타일을 통일하는 데 변수를 활용할 수 있습니다.

:root {
    --font-size: 16px; / 기본 폰트 크기 /
    --line-height: 1.5; / 줄 간격 /
}

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

5. 흔한 실수와 주의사항

실수 1: 변수 정의 누락

/ 잘못된 코드 /
body {
    background-color: var(--main-color); / 변수 정의 없음 /
}

올바른 코드:

:root {
    --main-color: #3498db; / 변수 정의 추가 /
}

실수 2: 변수 이름 오타

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

body {
    background-color: var(--main-colour); / 잘못된 변수 이름 /
}