[JS30] 자바스크립트로 CSS 변수(사용자 정의 속성) 조절하기

🔥Javascript 30 - Day 03🔥

1. 마크업/스타일링

이번에는 CSS를 JS로 제어해 봅시다! 우선 적당히 마크업하고 적당히 스타일링 합니다(참 쉽죠?).
자세한 html, css코드는 Codepen 결과물 에 있어요! >
제어 가능한 옵션은 '폰트 사이즈/메인 컬러/이미지 블러처리' 요렇게 3가지입니다.

<!-- HTML -->

<div class="wrap">
    <h1>Update CSS Variables With <em>JS</em></h1>
        <div class="option">
	    <strong>Option</strong>
	    <div class="block">
		 <label for="textSize" class="opt-title">Font size</label>
		 <input type="range" name="textSize" min="11" max="18" value="14" data-sizing="px" />
	    </div>
	    <div class="block">
		 <label for="mainColor" class="opt-title">Main Color</label>
		 <input type="color" name="mainColor" value="#ffc600">
	    </div>
	    <div class="block">
		 <label for="blur" class="opt-title">Background Blur</label>
		 <input type="range" name="blur" min="0" max="10" value="0" data-sizing="px" />
	    </div>
	</div>
	
	<div class="content">
	    <article class="article-1">
		 <img src="http://unsplash.it/960?image=183" alt="image" class="img">
		 <div class="txt">{텍스트}</div>
	    </article>
	    <article class="article-2">
		 <img src="http://unsplash.it/960?image=179" alt="image" class="img">
		 <div class="txt">{텍스트}</div>
	    </article>
            <article class="article-3">
		 <img src="http://unsplash.it/960?image=228" alt="image" class="img">
		 <div class="txt">{텍스트}</div>
	    </article>
	</div>
</div>

---

2. :root 속성 작성하기

그 다음, 아래와 같이 CSS를 추가 작성해 줍니다.

:root {
    /*코드 작성*/
}    

잠깐!!! 도대체 :root가 뭐지?! 싶은 사람(바로 접니다)을 위해 짚고 넘어가죠!

:root 선택자는 문서의 최상위 요소를 가리킵니다. HTML 문서에서 최상위 요소라 함은 당연히 <html/>을 말하겠죠!
아니 그럼, :root{}랑 html{}이랑 같은 거 아닌가 싶은데요. :root는 가상 선택자이기 때문에, html 셀렉터보다도 우선순위가 높습니다. 그래서 :root와 html에 대한 스타일을 동시에 선언하면, :root에 대한 스타일이 우선됩니다.

흠... 그럼, 이 :root는 어디에다 써먹을 수 있을까요? 바로 전역 스코프의 CSS 변수를 선언할 때 사용합니다.
CSS 변수라고 하니까 SASS에서 사용하는 $var = red;가 떠오르는데, 이거랑은 다릅니다. SASS가 아니라 CSS거든요!! (CSS도 변수를 쓸 수 있다니 충격....)

CSS 변수(정확히는 '사용자 정의 CSS 속성'이라고 합니다)는 아래처럼, --로 시작합니다.

:root {
    --textSize: 14px;
}  

이렇게 선언한 사용자 정의 속성은 var()를 통해 접근할 수 있습니다.

p {
    font-size: var(--textSize);
}

이제 --textSize의 값을 바꾸면 그에 따라 폰트 크기가 달라지는 걸 볼 수 있습니다.

이어서 :root에 다른 변수들도 작성해 줍니다.

:root {
    --textSize: 14px;
    --mainColor: #ffc600;
    --blur: 0px;
}

---

3. JS 작성하기

이제 본격적으로 스크립트 부분을 작성합니다. 우선 각 옵션(input)들을 셀렉팅합니다.

const inputs = document.querySelectorAll(".option input");
console.log(inputs);

콘솔에 [input, input, input]과 같이 찍혀나오네요.
얼핏 봐서는 배열같아 보이네요. [] 안에 들어있고, 인덱스와 length도 갖고 있으니까요. 그러나....
두둥. 사실 얘는 NodeList에 해당합니다. (배열과는 다르다, 배열과는!) (*참고)

아무 배열이나 만든 다음 콘솔에 찍어 비교해보면 알 수 있습니다. __proto__로 연결된 프로토타입 오브젝트가 각각 NodeList, Array로 서로 다릅니다. 배열은 배열 관련 메서드를 상속받아 쓸 수가 있어요(map, push, pop, filter, jon 등등!)
하지만 NodeList는 갖고 있는 메서드가 몇 개 없고 가난합니다(fotEach 정도...ㅠㅠ)
그래서 필요 시에는 이 NodeList를 배열로 변환해서 쓰기도 하지만, 여기서는 그냥 forEach를 쓸 거니까 패스하겠습니다. forEach는 IE 9부터 지원합니다! (*참고)

inputs.forEach(input => {
    console.log(input);
});

음... 그럼 폰트 사이즈를 바꾸려면 <input/>에 달린 프로퍼티 중에 value 값을 변경하면 되겠네요. 메인 컬러값이나 blur값도 마찬가지로 value에서 가져오면 될 거 같고요. 그럼 이제 input의 값을 바꾸는 함수를 만들어야겠네요. 우선은 handleUpdate()라는 빈 함수를 만들고 연결시켜줍니다.

const handleUpdate = function() {
    console.log(this.value);
}
        
inputs.forEach(input => {
    input.addEventListener("change", handleUpdate);
    input.addEventListener("mousemove", handleUpdate);
});

여기서 이벤트 리스너를 change와 mousemove일 때 달아준 이유는, change는 마우스 움직임이 끝난 순간만 포착하기 때문입니다. 그래서 range input을 드래그하는 '도중'에는 그 값을 알 수 없기 때문에 mousemove도 함께 넣어줬습니다 :)

아무튼 콘솔을 살펴보면 input을 조작할 때마다 value가 찍혀나오는 걸 볼 수 있습니다. 근데 그 값이 그냥 num(숫자)네요. CSS로 넣으려면 px 등의 단위가 필요합니다. 그리고 그게 data-sizing으로 px이란 값을 미리 넣어준 이유죠! 단위를 받아올 변수를 만들어줍니다.

const handleUpdate = function() {
    const suffix = this.dataset.sizing || '';
}

여기에 ||가 들어가는 이유는, 컬러값 같은 경우엔 data-sizing값이 없기 때문입니다. 그래서 undefined가 뜰 거고, 결국 #f1f1f1undefined같이 이상하게 나오겠죠. 그래서 값이 없는 경우엔 공백이 되도록 처리했습니다.

자, 그럼 이제 이 유동적인 값을 --textSize에게 반영시켜 볼 차례입니다.

const handleUpdate = function() {
    const suffix = this.dataset.sizing || '';
    document.documentElement.style.setProperty('--textSize', this.value + suffix);
}

아무 length input을 움직이면 그 값에 따라 폰트 사이즈가 조절되는 걸 볼 수 있습니다 (우와아앙)
여기서 document.documentElement는 document의 루트 요소인 Element를 리턴합니다. 뭐, 쉽게 말하자면 <html>인데요, :root 선택자로 루트 요소에다 CSS를 작성했기 때문에 이렇게 루트요소를 셀렉팅한 거죠. (*참고)

그 다음 나오는 style.setProperty()는 CSS속성을 재할당시키는 데 쓰입니다. (IE9+ 지원이며 IE8 이하는 setAttribute를 써야합니다) (*참고)
자, 아래에 두 코드가 있습니다!

button.style.setProperty ("background-color", "green");

button.style.backgroundColor = "green";

뭐가 다를까요? 사실, 위 두 코드는 똑같이 동작합니다. 차이가 있다면 위에는 KEBAB-CASE고, 아래는 CAMEL-CASE라는 점이겠네요. 저는 JS로 스타일을 바꾸려면 저렇게 카멜케이스로 써야한다~고 배웠지만 그 이유는 몰랐습니다@.@
그런데 저렇게 카멜케이스로 써서 스타일을 제어할 수 있는 이유는, style 객체 덕분이더라구요! style객체가 backgroundColor나, color, borderBottom 등의 속성을 갖고 있기 때문에 접근해서 쓸 수 있는 거죠.

헌데 우리가 쓰려는 --textSize라는 속성은 그냥 우리가 방금 즉석에서 뿅 만든 속성입니다. 따라서 style 객체에게 이런 속성을 물어봐도 "머랭" 이란 대답만 돌아오겠죠ㅋㅋㅋㅋ 그래서 대신 setProperty() 메서드를 써서 접근해야 합니다. 이 메서드는 3개의 파라미터를 갖는데, 그냥 ("{스타일 이름}", "{스타일 내용}")과 같이 두 개 쓰면 적용된다~!! 라고만 우선 알아둡시다.
그럼 아까 코드를 다른 사용자 정의 속성에도 반응하게끔 바꿀게요.

const handleUpdate = function() {
    const suffix = this.dataset.sizing || '';
    document.documentElement.style.setProperty(`${this.name}`, this.value + suffix);
}
    

짜라짠- 잘 적용되는 걸 볼 수 있습니다 :D

Codepen 결과물

See the Pen Update CSS Variables With JS by NY KIM (@nykim_) on CodePen.