JS30 Day03 Updating CSS Variables and JS
요구사항
- 자바스크립트를 이용해서 CSS를 변경한다.
- input의 이벤트를 통해 변경되는 value값에 px(suffix)를 붙여
:root전역 CSS에 재할당해주어야 함. - RGB값은 px가 필요없으므로
data-sizing을 지정해주지 않음. 값이 없다면 undefined가 되므로 ' '공백으로 처리하도록해야함
선수지식
-
this.dataset=>data-*으로 지정된 속성들을 보여줌 -
CSS에도 scope가 있음. 전역으로 선언해도 자식은 부모 -> 상위로 올라가면서 style이 먹음
1. CSS에서 변수사용법
HTML 어디에서나 변수에 접근하도록 선언
:root는 가상 선택자.html보다도 우선순위가 높다.- 전역스코프의 CSS변수를 선언할 때 사용
- 변수는
var(변수명)으로 접근할 수 있다.
:root{
--main-color : brown;
}
p {
color : var(--main-color);
}1.2 Sass (SCSS)
-
Syntactically Awesome Style Sheet
-
전처리기(Sass)로 작성해 CSS로 컴파일해서 동작시키는 것
-
선택자의 중첩, 조건, 반복, 단위연산 등 CSS보다 많은 기능을 편리하게 작성할 수 있다.
-
CSS의 Superset
코드 주석추가
function handleUpdate() {
//data-으로 정해진 것들의 집합 = dataset
const suffix = this.dataset.sizing || '';
//:root의 값을 변경해주면, 그를 따르는 img의 값들도 변함
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
inputList.forEach((input) => {
input.addEventListener("change", handleUpdate);
input.addEventListener("mousemove", handleUpdate);
});
document.documentElement: document의 루트요소인 element를 리턴 =><html>setProperty(): css속성을 재할당 시키는데 사용change, mousemove: change는 최종 변화만 기록함. 마우스를 따라가면서 값이 변해야하기 떄문에mousemove이벤트리스너도 추가함.
