css 변수 사용 방법

홈페이지 제작 시

컬러, 패딩, 마진 등등

반복해서 같은 값을 사용해야 하는 경우가 많습니다.

 

여기에 변수를 사용하면

웹 페이지의 통일성을 유지하는 것은 물론이고

유지보수도 손쉽게 관리할 수 있습니다.

 

 

---

 

:root 

:root는 문서의 가장 상단 요소를 선택하는 가상 클래스입니다만,

벌써부터 설명이 어려워졌죠. 간단히 말해 html에서 html 선택자 역할을 합니다.

 

그런데 변수의 범위를 전체에 적용하기 위해

html 선택자 역할을 하는 가상 클래스를 사용한다고 생각해주세요.

 

▼ 자세한 설명은 아래 문서를 참고해주세요.

https://developer.mozilla.org/ko/docs/Web/CSS/:root

:root - CSS: Cascading Style Sheets | MDN

반응형

 

---

 

변수 정의 하기

변수는 [변수 이름: 값;] 형식으로 적습니다.

주의점은 변수 이름 앞에 하이픈(--)을 두 개 넣어주셔야 해요.

마이너스라고도 부르는 기호를 꼭 두 개 넣어주세요.

 

마이너스 기호 두 개를 넣는 것을 빼면일반 css 속성을 적는 것과 동일합니다.

 

예시로는 색상 값을 넣었지만마진, 패딩 등 다른 css 속성도 값으로 넣을 수 있어요.

 

---

 

변수 사용하기

변수를 정의했다면 사용해보아야겠죠.

보통 css를 작성하듯 속성까지 적어줍니다.

 

그리고 속성 값으로 변수를 지정해주면 되는데,

먼저 var를 적어 변수를 사용하겠다고 선언해주세요.

그다음 괄호 안에 위에서 정의한 변수 이름을 적어주시면 됩니다.

 

여기서 var는 변수(variable)의 약자입니다.

 

형식을 적어보자면 [속성: var(변수 이름);]이 되겠죠.

 

---

이상으로 css에서 변수를 사용하는 방법을 적어보았습니다.

 

도움이 되셨다면 공감과 댓글, 구독을 부탁드립니다.

 

[같이 보면 좋은 포스팅]

[coding/editor] - visual studio code 유용한 확장 기능 모음 7가지

visual studio code 유용한 확장 기능 모음 7가지

[coding/html + css] - css로 마우스 오버 시 테두리에 애니메이션 효과를 줘보자

css로 마우스 오버 시 테두리에 애니메이션 효과를 줘보자

 

그럼 이만.

총총.