30일 Javascript 따라해보기 메모(3) - CSS 스타일 변수 JS로 조정하기

🥺 오늘도 영어네. (한국어일리가 없지)

아무튼 컬러픽커나 여러가지 사진에 대해 CSS 등을 조정하는, (블러 등) 이런걸

요번에 자바스크립트로 업데이트 해볼것이다.

스타일부터 선언하는데 가상 선택자라고 :루트에다가 :root 라고 먹였다.🔥

blog.thereis.xyz/136

:root 가상선택자와 CSS 변수

그담에 대쉬대쉬가 뭐냐고?

developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties

사용자 지정 CSS 속성 사용하기 (변수) - CSS: Cascading Style Sheets | MDN

CSS에서 쓸 변수요.

var(--변수명); 써서 잘 만들고, 동작하나 확인하자. 마지막으로 필터까지 먹이면 완성~
아. 클래스 h1 ... JS 글자까지 먹이기 ^^

CSS 변수를 업데이트 해보자꾸나.

도쿠먼트 쿼리설랙트 올~ (.countrols input)~ 😓
... 해서 각 컨트롤러의 값을 받자. 이것은 유사 배열 객체요. 상속받은 메서드들이 참 많다.
핸들 업데이트를 하나 만들고, 반복을 돌며 변경되는경우, 핸들을 건드리면 이벤트를 받는 콘솔을 찍어보자.
드래그 해도 체인지 하고 싶으면 마우스무브로 바꿔라. 난리난다.

😭 아무쪼록, 근데 이 CSS와 input을 바인딩해서 연결을 해야할 것 같은데 어떻게하느냐가 중요하니까
dataset을 통해서 돔에 data-어쩌구저쩌구로 하면 에 저장해둘 수 있는 공간이 생긴다.

... 아 똥같네... 예제가 ㅠㅠ 아무쪼록, suffix 를 하나 만들어서 사이즈를 받아보자. 없으면 || '' ; 해서 초기화 하는걸로

아무튼 사이즈를 다 가져오고 아닌경우 안받아오니 좋은 예제이다.

가지고온 네임을 이용해서 document 의 set property를 위에서 만든 변수명으로 지정한다.
이런식으로 바뀌는 변수명을 업데이트 할 수 있다.

끝.