사전명세

space input 의 값 실시간으로 가져오기 (변화할때마다)
- img 의 padding 값 (--spacing) 업데이트
blur input 의 값 실시간으로 가져오기 (변화할때마다)
- img 의 filter blur 값(--blur) 업데이트
color input 의 값 선택완료시 가져오기
- img background (--base) 업데이트
- h1 color(--base) 업데이트)

CSS

:root
- 의사 클래스 : DOM 트리의 루트 요소를 의미한다.
- HTML의 <html> 요소보다는 명시도가 더 낮지만, 그 점만 제외하면 루트요소를 의미하는 html 선택자와 똑같다.
- :root 는 전역 CSS 변수 선언에 유용하게 쓰인다.

:root - CSS: Cascading Style Sheets | MDN

var( ) 함수
- "CSS 변수" 의 값을 다른 속성의 값으로 지정할 때 사용한다.
- var( ) 함수는 "값" 에 대한 정의에만 사용할 수 있다.
  - 속성 이름, 선택자 등 다른 곳에 사용할 수 없고, 사용시 유효하지 않은 구문이 되거나, 변수와 관계없는 값이 된다.

var() - CSS: Cascading Style Sheets | MDN

blur( )
- 이미지에 가우시안 블러를 적용한다.
- 반환 값은 <filter-function> 이다.

blur() - CSS: Cascading Style Sheets | MDN

- CSS: Cascading Style Sheets | MDN

JS

range, color 타입의 "input" 태그에 대한 실시간 이벤트 등록

HTMLElement: input event - Web API | MDN