유지보수를 쉽게 하기 위해 변수를 사용한다고 한다 !
효율적인 프로그래밍이 될지도?
우선 css변수를 선언하는 경우에는
--
을 설정해줘야한다.
그리고 사용할 경우에는
var
을 사용해주어야한다.
예를 들면
:root {
--main-font-color: #000f22; /* CSS 전역 변수 선언 */
}
div {
color: var(--main-font-color); /* CSS 변수 사용 */
}이런 구조라고 볼 수 있다.
root는 쉽게 html이라고 볼 수 있다.
이 영역에 변수를 선언해 사용한다고 보면 되고 일종의 전역변수 영역이라고 이해하면 쉽다. !
css 변수 선언 스코프
자바스크립트와 동일하게 css에서도 변수의 스코프가 존재한다.
지역변수
요소 하나하나마다 지역 변수로서 활용할 수 있다. 지역변수로 선언된 css변수는 변수명이 같은지라도 전체에 공유되지 않고, 그 요소에만 적용하게 된다.
예를 들어
div {
--font-color: #000f22; /* CSS 지역 변수 선언 */
color: var(--font-color); /* CSS 변수 사용 */
}
p {
--font-color: #000fff; /* CSS 지역 변수 선언 */
color: var(--font-color); /* CSS 변수 사용 */
}
처럼 한 영역에서 선언하고, 같은 영역에서 사용이 가능하다.
음... 아직 내가 실무를 투입하진 못 했지만 이렇게 사용할까..? 굳이? 라는 의문도 들긴한다.
전역변수
root {
--font-color: #000f22; /* CSS 지역 변수 선언 */
--font-color: #000fff; /* CSS 지역 변수 선언 */
}
.cssVar {
color: var(--font-color); /* CSS 변수 사용 */
color: var(--font-color); /* CSS 변수 사용 */
}
이런식으로 선언문과 사용이 나눠진다. 이는 즉
내가 원하는 방식대로 꺼내 사용할 수 있다는 말이다.
이건 많이 사용할듯! 유지보수하기도 편하니까 !
예를들어 여러 타이틀의 색을 변수 하나로 넣어놓으면 유지보수가 생길 경우에 한 번만 바꿔줘도 쉽게 여러가지를 바꿀 수 있으니까?
근데 지역스코프는 ..음... 잘 모르겠음 !
css변수의 상속
css변수 역시 상속되는 특징을 갖고 있다.
보통 HTML에서 자식 엘리먼트에 값이 지정되지 않는 경우 부모 엘리먼트의 값을 상속받는데. css변수로 선언된 값이라도 예외 없이 상속된다.
html
<div class='one'>
<div class='two'></div>
<div class='three'></div>
</div>
--------------------------
css
.one {
--test: 10px;
font-size: var(--test);
}
.two {
--test: 2rem;
font-size: var(--test); /* 2rem */
}
.three {
font-size: var(--test); /* 10px */ /* .one에서 변수를 상속 받음 */
}
div.one의 font-size : 10px
div.two의 font-size : 2rem
div.three의 font-size : 10px (.one에서 변수를 상속 받음)
이것처럼 처음 넣은 변수 값에 상속이 되어 10px의 3rem의 값이 된다. 이런 것이 상속이라고 볼 수 있다.
하지만 만약 변수가 너무 많아서 헷갈릴때!!!!!!!!!!
.newCustomer {
/* --new-font-color가 없으면 orange를 사용 */
color: var(--new-font-color, orange);
}
.oldCustomer {
/* --old-font-color가 없으면 var(--normal-font-color, blue)를 사용한다 */
/* 그런데 또 --normal-font-color가 없으면 blue를 사용한다 */
color: var(--old-font-color, var(--normal-font-color, blue));
}
앞에 변수를 넣어줌. (앞이 x이면 들어갈 값)
이렇게 쉽게 사용해주면 된다.
이것을 대체변수 라고 한다.
하지만 사용할때의 주의점은 만약
이처럼
:root {
--chicken-color: 16px;
}
.chicken {
color: blue;
}
.chicken2 {
color: var(--chicken-color); /* color: 16px은 유효하지 않음 */
} 컬러값의 변수를 폰트에 잘 못 넣었을 경우 부모브라우저의
기본값이 들어가게 된다 .
변수로 단위값 사용 주의사항
만일 속성의 단위 값을 변수로 처리해야 할때 보통 아래와 같이 설정하면 된다고 생각할테인데, 실제 브라우저는 숫자와 단위 사위의 무의미한 공백이 발생하면서 두개의 토큰으로 인식하는 문제점이 발생한다.
.block {
--p: 33;
width: var(--p)vw;
height: var(--p)vh;
}
/*
.block {
width: 33 vw; 띄어쓰기가 적용되어 에러를 발생시킨다
height: 33 vh;
}
*/
이러한 경우에는 단위앞에 calc()을 사용해주는 것이 좋다.
.block {
--p: 33;
width: calc(var(--p) * 1vw);
height: calc(var(--p) * 1vh);
}
근데 내가 생각했을때는 무조건 폰트의 단위를 설정해줄 경우
무조건 앞에 calc() 을 넣어주는 게 안 헷갈리고 좋을듯..
그리고 만약 색을 넣을 경우
color의 rgb를 변수화
:root {
--color: 240, 240, 240;
--alpha: 0.8;
}
div {
background-color: rgba(var(--color), var(--alpha)); /* rgba(240, 240, 240, 80%) */
}
알파 값까지 세밀하게 조절해주는 것이 가능하다.
만약 백그라운드 이미지일 경우 변수화 한다면
:root {
--img: "img/sample.jpg";
}
div {
background: url(var(--img)); /* ERROR - 동작되지 않음 */
}
예를들어 아래와 같이 이미지 경로만을 변수에 설정하고 속성 부분에서 url(var(--img)) 식으로 호출하는 방법은 문법적으로 지원하지 않는다.
따라서 url(이미지경로) 자체를 변수화하여 사용하면 된다.
:root {
--img: url("img/sample.jpg");
}
div {
background: var(--img);
}
이렇게 하면 적용이 가능하다 !
em과 rem의 결론
많은 CSS 가이드들이 em을 사용해야만 하는 타당한 이유가 없는 경우라면 가급적 rem을 우선적으로 쓰도록 권고하고 있다. 왜냐하면 em의 경우 위에서 보았듯이 실제 몇 px로 변환될지에 영향을 주는 변수가 많아지기 때문에 em을 사용해서 스타일된 요소의 경우 재사용이 어렵고 유지보수가 힘들어지는 경향이 있기 때문이다.
하지만 rem과 em도 용도에 맞게 적절히 혼용해서 사용할 수 있다. 예를 들어 어느 페이지에서든 고정된 사이즈를 사용해야 한다면 rem을, 부모 요소에 따라 유동적으로 변해야 하는 곳에는 em을 사용하면 된다. 그래서 보통 font-size에는 rem을 사용하고 padding이나 margin같이 화면에 따라 유연하게 변하는 크기는 em을 사용한다.
