10.1 변수 선언
CSS 변수(또는 사용자 정의 속성(CSS Custom Properties))는 개발자들이 값들을 한 곳에 저장하고 문서 내에서 재사용할 수 있게 해줘. 이 기능은 특히 큰 프로젝트에서 CSS를 더 유연하고 관리하기 쉽게 만들어줘.
변수 선언
CSS에서 변수는 변수가 선언될 때 두 개의 대시 (--)로 시작해. 일반적으로 이 변수들은 :root 선택자 안에 선언돼서 문서 전체에서 사용할 수 있어.
구문:
:root {
--변수-이름: 값;
--변수-이름: 값;
}
예:
이 예에서는 세 개의 변수를 선언했어: --main-color, --secondary-color, 그리고 --font-size.
:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
10.2 변수 사용
변수를 사용할 때는 var() 함수를 사용해, 이 함수는 변수 이름을 인수로 받아.
구문:
선택자 {
속성: var(--변수-이름);
속성: var(--변수-이름);
}
예:
이 예에서는 이전에 선언된 변수를 사용하여 <body> 요소의 배경, 텍스트 색상 및 글꼴 크기를 스타일링 해.
body {
background-color: var(--main-color);
color: var(--secondary-color);
font-size: var(--font-size);
}
10.3 변수의 상속 및 재정의
CSS 변수는 요소의 계층 구조를 따라 상속돼. 즉, 한 요소에 선언된 변수를 그의 자식 요소들도 사용할 수 있다는 거야. 변수들은 다른 선택자 내에서 다시 정의할 수도 있어.
예:
이 예에서 .header 요소는 --main-color 변수를 재정의 하고, 이 새로운 변수는 단지 이 요소에만 적용돼. 동시에, .footer 요소는 :root에 선언된 변수 값을 사용해.
<div class="header">Header</div>
<div class="footer">Footer</div>
:root {
--main-color: #3498db;
}
.header {
--main-color: #e74c3c;
background-color: var(--main-color);
}
.footer {
background-color: var(--main-color);
}
10.4 CSS 변수 사용의 장점
1. 스타일 관리 간소화:
변수들을 사용하면 한 위치에서 하나의 속성 값을 변경할 수 있고, 이 변경은 변수가 사용된 모든 장소에 자동으로 적용돼. 이는 특히 테마화 및 일관된 스타일 유지에 유용해.
2. 코드 가독성 및 유지보수 향상:
변수를 사용하면 CSS 코드가 더 읽기 쉽고 이해하기 쉬워져. 왜냐하면 색상이나 크기 같은 값을 설명하는 데 사용할 수 있기 때문이야, 예를 들어 색상 이름을 사용해 의미 있는 이름으로 만들 수 있어 (--main-color 대신에 #3498db).
3. 스타일의 동적 업데이트:
변수들은 JavaScript를 통해 동적으로 변경될 수 있어서 더 인터랙티브하고 동적인 사용자 인터페이스를 만들 수 있어.
GO TO FULL VERSION