oris9

CSS 변수 선언, 스코프, 제어(자바스크립트) 본문

HTML, CSS

CSS 변수 선언, 스코프, 제어(자바스크립트)

oris9 2024. 2. 4. 02:57

 

CSS 변수 선언 및 호출

CSS에서 변수의 이름을 지정할 때는 변수 맨 앞에 -- 를 붙여주어야 한다. 그리고 변수를 호출해 사용할 때는 var(변수명)형식을 사용한다.

 

:root {
	--main-font-color: #000f22;  /* CSS 전역 변수 선언 */
}

div {
	color: var(--main-font-color);   /* CSS 변수 사용 */
}

 

CSS 변수 선언 스코프

 

전역 변수 스코프

CSS의 :root 의사클래스는 문서 트리의 루트 요소를 선택한다. 즉, HTML 문서의 루트 요소는 <html> 요소이므로, :root와 html은 같다고 보면 된다.

보통 이 영역에 css 변수를 선언해 사용한다고 보면된다. 자바스크립트로 따지면 일종의 전역 변수 영역이라고 이해하면 된다. :root에서 CSS 변수를 선언하여 HTML 문서 어디에서나 해당 변수에 접근할 수 있도록 구성하는 것은 흔한 패턴이다.

css변수에 유효하지 않은 값이 들어가면 상속받은 값이 적용되게됨 

CSS 변수 대체값 설정

만일 CSS 변수의 수가 너무 많아, 특정 변수가 정의 됬는지 안됬는지 모를떄, 변수값이 없다면, var() 를 중첩함으로써 여러 개의 대체 변수를 정의할 수 있다. 

css
.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)); 
}

변수로 단위값 사용 주의사항

만일 속성의 단위 값을 변수로 처리해야 할때 보통 아래와 같이 설정하면 된다고 생각할테인데, 실제 브라우저는 숫자와 단위 사위의 무의미한 공백이 발생하면서 두개의 토큰으로 인식하는 문제점이 발생한다.

css
.block {
   --p: 33;
   width: var(--p)vw;
   height: var(--p)vh;
}

/*
.block {
   width: 33 vw; 띄어쓰기가 적용되어 에러를 발생시킨다
   height: 33 vh;
}
*/

따라서 이 경우 calc() 함수를 사용해야 원하는 의도를 이행할 수 있다.

css
.block {
   --p: 33;
   width: calc(var(--p) * 1vw);
   height: calc(var(--p) * 1vh);
}

 

 

background-image의 url을 변수화

요소의 배경 이미지 경로를 변수로 처리하여야 할때 주의해야할 점이 있다. 

예를들어 아래와 같이 이미지 경로만을 변수에 설정하고 속성 부분에서 url(var(--img)) 식으로 호출하는 방법은 문법적으로 지원하지 않는다.

css
:root {
	--img: "img/sample.jpg";
}

div {
    background: url(var(--img)); /* ERROR - 동작되지 않음 */
}

따라서 url(이미지경로) 자체를 변수화하여 사용하면 된다.

css
:root {
	--img: url("img/sample.jpg");
}

div {
    background: var(--img);
}

 

 

// 가상 클래스 요소 얻기
let root = document.querySelector(':root'); 

// window.getComputedStyle 메서드를 이용하면, 해당 요소에 전역적으로 적용된 모든 형태의 style을 반환한다
let variables = getComputedStyle(root); 

// 변수 값 얻기
variables.getPropertyValue('--hover');

// 변수 값 제어
~ .style.setProperty('css변수', '값')

 

 

 

주의할점

// js를 통해 제어하는 경우 인라인으로 들어가므로 css파일에 적용한 속성보다 우선순위가 높게 들어간다

전역으로 CSS 변수를 사용해야 한다면 상위 요소에 선언
또한 특정 html 태그 요소에 인라인으로 css 변수를 선언한다면, 그 변수는 해당 요소에만 들어있는 지역변수로서 취급 되기 때문에 다른 요소에서 가져다 쓰지 못한다. 이때는 <html> 이나 <body> 태그와 같은 상위 요소에 인라인 스타일로 css 변수를 저장하는 식으로, 위에서 배웠던 css 변수 상속 기능을 응용하면 된다.

 

 

출처: https://inpa.tistory.com/entry/CSS-📚-CSS용-변수-variable-정리 [Inpa Dev 👨‍💻:티스토리]

'HTML, CSS' 카테고리의 다른 글

[HTML/CSS] 어려운 css 클래스명 짓기 - BEM을 공부해보자  (0) 2024.03.26
[html/css] HTML5 시멘틱 태그, 웹표준, WAI-ARIA  (0) 2024.03.12
[html/css] CSS에서 position에 대해 이해하기  (0) 2024.03.10
[html/css] CSS의 Cascading과 우선순위에 대해 이해하기  (0) 2024.03.10
[html/css] 웹폰트 최적화가 필요한 이유와 방법에 대해 알아보기  (0) 2024.03.03
'HTML, CSS' Related Articles more