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 등 다양한 숫자가 나올 텐데 이것을 머릿속에 넣는 것은 쉽지 않습니다.변수명을 직관적으로 붙여두면 쉽게 기억하고 사용할 수 있습니다.