찾아보니 CSS 변수와 CSS 사용자 정의 속성은 같은 뜻인 것 같다.
https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties
강의에서 제대로 된 개념을 알려주지 않아 mdn을 참고했다. 개념을 봐보니 다른 언어의 변수라고 생각하면 될 듯하다.
CSS변수를 정의할 때는 하이픈 두 개를 사용한다. 다른 개발자들이 어떤 것을 정의했는지 구분하지 쉽도록 만들려면 변수 이름에 정의하고자 하는 속성을 지정해주는 것이 좋다. 이름은 대소문자를 구분한다.
강의에서는 주로 회색을 설정했기 때문에
--color-grey-100
--color-grey-200
--color-grey-500식으로 회색을 사용할 거고, 그것의 명도는 어느 정도 라는 것을 알려주는 이름을 설정했다. 아마 공백을 하이픈 하나로 표시하는 듯 하다.
이렇게 지정한 변수는 var()함수로 사용할 수 있다.
html {
background-color: rgb(236, 236, 236);
font-family: 'Krub', sans-serif;
font-weight: 400;
--sample-variable: rgb(21, 22,222);
}
.card-container {
background-color: var(--sample-variable);
width: 350px;
margin: 50px auto;
box-shadow: 3px 3px 10px rgb(201, 200, 200);
}card-container클래스 선택자의 첫 줄을 보면 var(--sample-variable);로 --sample-variable 변수를 사용하고 있다.
중요하다고 생각한 css변수의 특성만 정리하자면
- 기본 사용법
유효한 CSS 값이라면 아무거나 그 값으로 지정할 수 있다. 다른 일반적인 속성과 마찬가지로 css 사용자 지정 속성도 위와 같이 규칙 집합 내에 작성해야 한다. 예를 들어 바로 위의 코드에서 --sample-varibale은 html 선택자 안에 들어가 있다.
또한 :root 의사 선택자에 선언해서 HTML 문서 어디에서나 사용자 지정 속성에 접근할 수 있도록 구성하는 것이 일반적이라고 한다.
- 유지보수 측면에서 매우 좋음. 큰 프로젝트에서 유용하게 쓰인다.
웹사이트가 복잡해질 수록 CSS의 양이 많아진다. 이때 만약 값들을 전부 따로 설정해두었다면 같은 스타일을 가진 컨텐츠를 수정해야할 때 미친듯한 노가다를 해야할 것이다. 반복적으로 사용되는 값을 CSS변수로 지정해두면 한 영역에 저장된 값을 다른 곳들에서 사용할 수 있으므로 노가다를 피할 수 있다.
+#00ff00보다는 --main-text-color가 이해하기 쉽듯이, 이름 자체에 의미가 들어가도록 설정하게 되면 이해하기 쉬워진다. 특히 같은 색을 다른 맥락에서 사용할 때 이 장점이 도드라진다고 한다.
- 유효하지 않은 변수가 들어갔을 시에는 기본값이나 상속된 값이 사용된다.
ex) font-size에 색상을 정의한 변수가 들어가는 등
