사용자 지정 CSS

사용자 지정 CSS 속성은 CSS 저작자가 정의하는 개체로, 이 개체에는 문서 전반적으로 재사용할 임의의 값을 담는다.

 

복잡한 웹사이트의 경우 방대한 양의 CSS를 가지고 있는데, 많은 값을 반복적으로 사용하는 경우가 많다. 예를 들어 폰트의 색상, 배경 색상, 테두리 색상 등... 수백 곳 서로 다른 위치에서 동일한 속성값을 사용한다면, 추후 유지보수에 의해 그 속성값을 바꿔야 하는 경우 일일이 그 값들을 찾아서 하나씩 바꿔야 하는데, 이는 시간도 걸릴 뿐더러 실수도 많을 것이다.

 

이 때, 사용자 지정 CSS를 사용하면 CSS전반에 걸쳐 사용되는 임의의 값을 변수에 저장해두고, 여러 곳에서 참조하여 사용이 가능하다. 전체 수정을 하게 될 경우에도 사용자 정의 CSS의 속성값만 수정해주면 전체 반영이 되므로 굉장히 편리하다.😊

 

📌 :root 가상 클래스

:root 선택자는 html 웹 문서 구조상 가장 상위 요소를 선택한다. 즉, html에서 root는 html을 가리킨다. 그렇다면, 선택자로 그냥 html을 선택할수도 있겠으나 html과 :root의 차이가 존재한다. :root는 가상선택자이기에 우선순위가 html보다 높다. 🤔

이러한 특징을 이용해 최상위 요소에 CSS 변수를 사용하면 모든 요소에서 이 변수를 참조하여 사용할 수 있다.

 

📌 CSS 변수 선언

웹 문서에서 공통으로 사용될 속성을 미리 변수에 선언한다. 변수의 이름을 지정할 때 변수 맨 앞에 - -(하이픈 2개)를 붙여주어야 한다.

:root {
	/*color*/
	--color-black: #000;
	--color-white: #fff;
	--color-red: red;

	/*size*/
	--font-big-size: 24px;
	--font-medium-size: 18px;
	--font-small-size: 12px;
}

CSS 변수의 이름은 대소문자를 구분한다. 따라서 - -my-color와 - -My-color은 서로 다른 속성으로써 처리한다.

 

📌 CSS 변수 사용

var( ) 함수를 지정하고, 매개변수로 참조하고자 하는 CSS 변수 이름을 작성한다.

.black-btn {
	font-size: val(--font-big-size);
	color: val(--color-black);
}

.item {
	font-size: val(--font-medium-size);
	color: val(--color-red);
	background-color: val(--color-white);
}

📌 CSS 변수의 상속

CSS 변수 역시 상속된다. 자식 요소에 값이 지정되지 않은 경우 부모 요소의 값을 상속받는다.

 

📌 CSS 변수의 대안 값

✅ 정의되지 않은 CSS 변수

CSS 변수가 정의되지 않은 경우, val( )을 사용해 대체 변수를 정의할 수 있다.

.newItem {
	color: val(--new-font-color, blue); /* --new-font-color가 없으면 blue를 사용 */
}

.oldItem {
	color: val(--old-font-color, val(--color-black, blue)); 
	/* --old-font-color가 없으면 val(--color-black, blue)를 사용, 
	--color-black가 없으면 blue를 사용 */
}
.etcItem {
	color: val(--old-font-color, --color-black, blue); /* 유효하지 않은 방법 */
}

✅ 유효하지 않은 CSS 변수

특정 브라우저에서는 CSS 변수를 지원하지 않는다. 따라서 CSS 변수를 적용할 수 없는 브라우저를 대비하여 방어코드를 작성해주어야 한다. (※현재 IE에서는 CSS 변수를 일체 지원하지 않고 Edge에서는 지원하고 있다. )

.box {
	background-color: #F00; /* 방어코드 */
	background-color: var(--red, #F00);
}