03.Playing with CSS Variables and JS

프로젝트 소개

• input element의 값을 받아서, 연결되어 있는 대상(이미지, JS 글자)에 css 속성 업데이트하기

코드작성 순서

1. 동시 여러 element의 style 변형위하여, :root 및 변수 속성 생성, 그리고 변수 활용한 변경대상 css 초기값 설정
2. input element에 이벤트 리스너 붙임
3. 이벤트 감지(값 변경)되면, 콜백함수 실행으로 style 변경(변수 값)

배운 것들

CSS 사용자 지정 속성

: 사용자 지정 속성(CSS 변수, 종속 변수)은 CSS 저작자가 정의하는 개체로, 문서 전반적으로 재사용할 임의의 값을 담습니다. 사용자 지정 속성은 전용 표기법을 사용해 정의하고, (--main-color: black;) var() 함수를 사용해 접근할 수 있음(color: var(--main-color);)
https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties

CSS 최상위 선택자 ': root'

: 문서 트리의 루트 요소를 선택/ HTML의 루트 요소는 요소이므로, :root의 명시도가 더 낮다는 점을 제외하면 html 선택자와 동일함
: 기본적으로 다른 선택자에서 인용하는 속성이 공통적일 경우 :root 안에 기본 값을 지정하고, 아닌 경우만 개별 선택자 속성으로 별도로 지정 (코드를 줄일 수 있음. 사용자 지정 속성과 함께 활용 가능)
http://developer.mozilla.org/ko/docs/Web/CSS/:root

최상위 document에 접근

: documentObject.documentElement 는 the root node of the document를 반환
: 최상위 element의 속성(style등)에 접근 시 활용

특정 조건 하에서만 변수에 값 할당하는 방법('||')

: or의 경우, if 문을 대신한 간략한 코드 작성 가능
: 적극 활용 필요
https://webisfree.com/2016-05-26/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%B3%80%EC%88%98%EC%84%A0%EC%96%B8%EC%8B%9C-%ED%8C%81-%EB%B0%8F-%EC%A0%95%EB%B3%B4

최종 코드

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

const inputs = document.querySelectorAll("input");
inputs.forEach( input => input.addEventListener('change', styleUpdate));

느낀 점

• addEventListener는 각 element에 대한 함수이므로, 여러 element로 구성된 array 요소에 붙일 경우는 반드시, array method인 forEach를 활용하고, 이에 대한 콜백함수로 addEventListener를 붙여야 함

• 여러 요소가 css 속성을 공유하도록 하고, 한꺼번에 제어하고자 하기 위해서, :root와 변수 형태의 css 속성, 그리고 최상위 선택자 .documentElement. style.setProperty로 접근함

• css 속성을 사용자 정의 속성명으로 변수화 시키고, 이와 통일된 html element의 속성명(name 등)을 만들면, event를 감지하여 this를 통해 값을 가져오는 동시에 그대로 변화시키고자 하는 css 속성명으로 대입할 수 있어 간략화 시킬 수 있음