웹 페이지 제작 규모가 커질수록 CSS는 정말 복잡한 구조를 가지게 됩니다.
거대해진 CSS 문서에 반복되는 요소는 반드시 존재할 것이고 이 반복되는 요소를 수정할 필요가 있어진다면, CSS에서 일일이 찾아내서 교체하는 수고를 들여야합니다.
이러한 반복 작업을 줄일 수 있도록 CSS에서는 var()이라는 변수 기능을 지원하기 시작했습니다.
var() 기본 사용법
:root 가상 클래스
변수는 CSS 문서 최상단에 :root라는 가상 클래스를 선택하고 선언합니다. 이때 :root는 CSS가 포함된 웹 문서의 루트를 의미하는데요. 이는 곧 <html> 요소를 선택한다라는 의미로 이해하시면 됩니다.
CSS는 HTML 문서의
<head>태그 내의<link>를 통해 선언됩니다. 그러므로 이 문서의 최상단 루트요소는 당연히<html>이 됩니다.<html> <head> <link rel="stylesheet" href="..." type="text/css"> </head> <body> </body> </html>
변수 선언하고 사용하기
:root 가상 클래스를 선택했다면 이제 변수를 선언할 차례입니다.
변수 선언은 앞에 --를 붙이고 변수명을 적습니다.
:root {
--main-font-color: red;
--main-bg-color: gray;
--font-size: 16px;
}이렇게 선언된 변수는 var(변수명)을 사용해서 스타일 속성값으로 사용할 수 있습니다.
<h1>CSS VAR</h1>h1 {
color: var(--main-font-color);
background-color: var(--main-bg-color);
}
변수 선언에 색상이나 수치 정도만 예시로 들었지만
Serif등과 같은 문자열 값도 설정이 가능합니다.
색상 키워드만을 이용해서 변수값을 선언했는데요.
16진수(#000000), rgba(0, 0, 0, 0), hsla(0, 0%, 0%, 0)방식도 당연히 변수값으로 사용할 수 있습니다.h1 { hex --h1-color: #0000ff; color: var(--h1-color); } h1 { rgba --h1-color: 0, 0, 255, 1; color: rgba(var(--h1-color)); } h1 { hsla --h1-color: 240, 100%, 50%, 1; color: hsla(var(--h1-color)); }
var() 활용
1. Local variable
위에서 알려드렸던 :root 가상 선택자에 선언하는 방식은 해당 CSS의 root가 적용되는 범위 내에서 사용할 수 있는 Global variable로 선언하는 방식이었습니다.
즉, 같은 문서의 html 태그 아래에 위치한다면 css 파일이 달라도 변수를 사용할 수 있습니다.
<html> <head> <link rel="stylesheet" href="..." type="text/css"> <= 여기서 선언된 변수가 <link rel="stylesheet" href="..." type="text/css"> <= 여기에도 영향을 준다 </head> </html>
CSS 변수는 Local variable로도 선언할 수 있습니다.
h1 {
--h1-color: green;
color: var(--h1-color);
}
지역 변수의 스타일 상속
오래전에 캐스케이딩 원리를 설명드리면서 자식 요소는 부모 요소의 스타일을 상속받는다라고 설명드렸었습니다.
지역 변수로 선언된 변수도 자식 요소에 그대로 상속이 됩니다.
<h1>
CSS VAR
<p>child</p>
</h1>h1 {
--h1-color: green;
color: var(--h1-color);
}
p {
color: var(--h1-color);
}
2. 유효하지 않은 속성값
만약 color를 위한 변수에 색상 대신 수치가 들어간다면 어떻게 될까요?
h1 {
--h1-color: 100;
color: var(--h1-color);
}위와같은 경우의 결과는 부모 요소로부터 상속받습니다. h1 부모 요소의 color 속성값을 찾아 상속 받습니다.
만약 부모 요소에 정의된 스타일이 없거나 부모 요소가 없는 경우에는 해당 요소의 브라우저 기본값을 따라갑니다. h1같은 경우 기본 color가 black이기 때문에 글자가 검정색으로 나오겠죠?
3. 대체값 사용하기
변수를 사용했는데, 해당 변수가 유효하지 않을 경우의 대체값을 설정할 수 있습니다. ,를 사용해서 대체값을 추가하기만 하면 됩니다.
h1 {
--h1-color: 16px;
color: var(--my-color, red); /** --my-color 변수를 찾을 수 없으면 red를 사용한다. **/
}
다음과 같이 대체값으로 또 다른 변수를 지정할 수도 있습니다.
h1 {
--h1-color: 16px;
color: var(--my-color, var(--mymy-color, red));
/**
--my-color 변수를 찾을 수 없으면 --mymy-color를 찾고,
이것도 찾을 수 없으면 red를 사용한다.
**/
}추가적으로 유효하지 않은 속성값 변수를 넣었을 경우에는 대체값이 아닌 부모 요소의 스타일 속성을 따라갑니다.
왜냐하면 해당 변수와 값이 일단은 존재하고 있기 때문에 대체값이 아닌 --h1-color가 인식되는 것이기 때문입니다. 즉, 대체값은 해당 변수 자체가 존재하지 않는 경우에 대해서 적용됩니다.
h1 {
--h1-color: 16px;
color: var(--h1-color, red);
}
