CSS에서 변수를 선언 및 사용하는 방법입니다.
변수 선언 방법 selector 중:root은 문서 전체를 의미합니다.하나의 element 내에서만 변수를 사용하시려면 해당 selector를 사용하시면 됩니다. “– (variablename)” 형식입니다.변수 사용 방법 var() 형식으로 변수를 사용할 수 있습니다.
사용법은 간단하게 여기까지 CSS에서 변수를 사용해야 하는 이유
- 유지보수가 효율적이다.
- 예를 들어, 각 세션의 <p> 값의 크기를 16px로, navbar에서 font-size와 같게 하고자 합니다.완성해 보면 글씨가 너무 작은 것 같아요. 이것을 20px로 조정하고 싶습니다.그럼 16px를 직접 20px에 두 번 걸쳐 변경해야 합니다.
- 변수를 사용하면 어떻게 될까요?이렇게 되어 있다면 :root 안에 있는 부분만 변경하면서 결과를 확인하면 된다. 번거로움을 줄이고 실수를 줄인다.즉, 유지보수가 효율적이다.
2) 외우기 쉽다.
“navbar안에 있는 p를 16px로 지정해 놓았다”가 기억하기 쉬울까요?”navbar 안에 있는 p를 –font-regular로 지정해 놓았다”가 기억하기 쉬울까요?CSS 작업을 하다 보면 padding이나 margin, font-size 등 다양한 숫자가 나오겠지만 이것을 머릿속에 넣기가 쉽지 않습니다.변수명을 직관적으로 붙여두면 쉽게 기억하고 사용할 수 있습니다.