19'C 흐림
서울 강남구
CSS에서 변수를 선언 및 사용하는 방법입니다.
변수 선언 방법
/* 변수를 선언하는 방법 */
:root{
--color-white : #ffffff;
--font-regular: 16px;
--size-border-radius: 4px;
}
selector 중 :root는 문서 전체를 의미합니다.
한 element 내에서만 변수를 사용하고 싶다면, 해당 selector를 사용하면 됩니다.
"--(variable name)" 형식입니다.
변수 사용 방법
section {
color: var(--color-white)
font-size: var(--font-regular);
border : 1px solid black;
border-radius: var(--size-border-radius);
}
var() 형식으로 변수를 사용할 수 있습니다.
사용법은 간단하게 여기까지,
CSS에서 변수를 사용해야 하는 이유
1. 유지 보수가 효율적이다.
예를 들어, 각 section의 <p> 값의 크기를 16px로, navbar에서 font-size와 동일하게 만들고 싶다고 합시다.
section h1{
font-size:16px;
}
.nav {
font-size:16px;
}
완성하고 보니 글자가 너무 작다는 생각이 듭니다. 이를 20px로 조정하고 싶습니다.
그러면 16px을 직접 20px로 2번에 걸쳐 변경해주어야 합니다.
변수를 사용하면 어떻게 될까요?
:root {
--font-regular: 16px;
}
section h1{
font-size:var(--font-regular);
}
.nav {
font-size:var(--font-regular);
}
이렇게 되어 있다면, :root 속에 있는 부분만 변경해주면서 결과를 확인하면 된다. 귀찮음을 줄이고, 실수를 줄인다.
즉, 유지보수가 효율적이다.
2. 기억하기 쉽다.
"navbar 속에 있는 p를 16px로 지정해두었어"가 기억하기 쉬울까요?
"navbar 속에 있는 p를 --font-regular로 지정해두었어"가 기억하기 쉬울까요?
CSS 작업하다 보면 padding이니 margin이니 font-size 등 다양한 숫자가 나올텐데, 이를 머릿속에 집어넣는 일은 쉽지 않습니다.
변수명을 직관적으로 지어두면, 쉽게 기억하고 사용할 수 있습니다.