변수(variable)은 데이터를 저장할 수 있는 메모리 공간을 의미하고, 저장된 값은 변경될 수 있죠.
이런 변수를 css에서도 사용할 수 있습니다.
인터넷 익스플로러에는 지원이 되지 않기 때문에 사용을 거의 안했지만,
이제 인터넷 익스플로러가 사라졌으니, 유용하게 사용하기 위해 더 자세히 알아둬야겠습니다 ㅎㅎ
1. css변수 선언 및 사용
변수의 이름을 지정할 때 변수 맨 앞에 --를 붙여줍니다. 그리고 변수를 사용할 때는 var(변수명)으로 호출합니다.
/*전역변수 선언*/
:root{
--main-bg:#e7e7e7;
}
/*지역변수 선언*/
.content{
--content-bg: #000;
}
/*변수 호출*/
.main{
background:var(--main-bg);
}
2. css변수 스코프
전역 변수
css의 :root는 문서의 최상위 요소를 선택하고, HTML에서 최상위(루트)는 <html>요소입니다.
고로 :root와 html은 같지만, html보다 :root의 스타일이 우선 순위가 더 높습니다.
그래서 :root를 이용해 css 변수를 선언하는 것이죠!!
:root{
--main-bg:#e7e7e7;
--size-title:20px;
--size-desc:16px;
}
.title{
font-size:var(--size-title);
}지역 변수
지역 변수는 요소 하나하나 마다 선언되고, 그 요소 안에서만 사용 가능한 변수입니다.
div {
--font-color: #ff0000;
color: var(--font-color);
}
span {
--font-color: #000fff;
color: var(--font-color);
}
3. css변수 기본값 설정
css 변수가 정의되지 않은 경우 의도와는 다른 속성 값이 적용되는 문제가 생길 수 있습니다. 이런 경우를 대비하기 위해 변수를 정의할 때, 기본 값을 함께 작성할 수 있습니다.
div {
color: var(--font-color, red);
}
4. css변수의 상속
html에서 자식 요소의 속성 값이 지정되지 않은 경우 부모 요소의 속성 값을 상속받죠?
이와 같이 css변수도 상속됩니다. wow!
<div class='parent'>
<div class='child1'></div>
<div class='child2'></div>
</div>.parent{
--size:10px;
font-size:var(--size);
}
.child1{
--size:15px;
font-size:var(--size);
}
.child2{
font-size:var(--size); /*10px*/
}
css변수 역시 잘 이용하면 정말 유용하고, 간결한 코드를 짤 수 있을듯 합니다.
이상 css 변수에 대해 알아봤습니다~
글 읽어 주셔서 감사합니다:)
'css' 카테고리의 다른 글
| [CSS]border에 그라데이션 넣기(feat. 사각형, 원형) (0) | 2023.04.25 |
|---|---|
| [css] flex 내 가변 요소 (가변 자식 요소가 부모 요소를 넘을 때) (0) | 2023.02.06 |
| [css] 파이 차트(Pie chart) 만들기 conic-gradients (0) | 2023.02.04 |
| [css] 텍스트 흐름 효과 marquee? animation?(반전 주의) (0) | 2023.02.02 |