- nav#navbar
- li.
CSS 변수(CSS 사용자 속성)
CSS 변수는 예전에는 Sass나, LESS, Stylus와 같은 CSS 전처리기(CSS preprocessor)를 통해서 접할 수 있었던 기능이었습니다. 하지만 최근에는 CSS 스펙 자체에 CSS 변수 개념이 추가되어 이제 CSS 전처리기 없이도 부담없이 CSS 변수를 사용할 수 있게 되었습니다
CSS 사용자 속성(CSS custom properties)라고도 알려진 CSS 변수(CSS variables)에 대해서 알아보겠습니다!
CSS 변수 정의
CSS 변수가 CSS 사용자 속성이라고 불리는 이유는 CSS 일반 속성과 동일한 문법으로 정의가 가능하기 때문입니다. 기존의 CSS 일반 속성과 눈에 뛰는 차이점이라면 CSS 사용자 속성은 이름이 --로 시작해야 한다는 것입니다.
예를 들어, 아래 --color 속성은 우리가 새롭게 정의한 속성이며, CSS에 기존에 내장되어 있는 color 속성과는 다른 속성입니다.
.ex {
--color: red;
color: blue;
}글자색을 지정해주는 color 속성과 달리 --color 속성은 그 존재만으로는 아무런 스타일 효과를 내지 못합니다.
css 변수 접근
CSS 변수가 스타일하는데 사용되려면 읽어서 일반 CSS 속성에 설정을 해줘야 합니다. CSS 변수값을 읽으려면 var() 함수를 사용합니다.
예를 들어, 다음과 같이 --gray 속성에 저장된 CSS 변수값을 읽어서 background 속성에 할당할 수 있습니다.
.ex {
--gray: #ccc;
background: var(--gray);
}css 변수 기본값
var() 함수는 두번째 인자로 기본값을 받는데요. CSS 변수에 접근할 때 해당 CSS 변수가 이미 정의되어 있는지 확실치 않는 경우에 활용할 수 있습니다.
.ex {
color: var(--color, black);
}위 스타일 정의는 --color 변수가 정의가 되어 있는 경우에는 그 변수값이 color 속성으로 사용되고, 그렇지 않는 경우에는 black이 대신 color 속성값으로 지정됩니다.
퍼와서 마음에드는 부분만 수정했음 출처 : https://www.daleseo.com/css-variables/
