[JavaScript30] 03. CSS Variables - CSS 속성 값 변수 사용하기

JavaScript30 - 바닐라 자바스크립트 Day3

1. 소스코드 - HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Scoped CSS Variables and JS</title>
</head>
<body>
  <h2>Update CSS Variables with <span class='hl'>JS</span></h2>

  <div class="controls">
    <label for="spacing">Spacing:</label>
    <input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">

    <label for="blur">Blur:</label>
    <input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">

    <label for="base">Base Color</label>
    <input id="base" type="color" name="base" value="#ffc600">
  </div>

  <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">

  <style>

    /* :root 의사 클래스에 선언한 지정 속성은 HTML문서 전역에서 접근 가능하다. */
    :root{
      /* --지정속성명: 값; */
      --base: #ffc600;
      --spacing: 10px;
      --blur: 10px;
    }

    img{
      /* css속성명: var(--지정속성명) */
      padding: var(--spacing);
      background: var(--base);
      filter: blur(var(--blur));
    }

    .hl{
      color: var(--base);
    }

    /*
      misc styles, nothing to do with CSS variables
    */

    body {
      text-align: center;
      background: #193549;
      color: white;
      font-family: 'helvetica neue', sans-serif;
      font-weight: 100;
      font-size: 50px;
    }

    .controls {
      margin-bottom: 50px;
    }

    input {
      width: 100px;
    }
  </style>

  <script>
    // controls클래스의 자식input앨리먼트를 선택해 리스트형식으로 가져옴
    const inputs = document.querySelectorAll('.controls input');

    function handleUpdate(){
      // 마우스가 움직이거나 값이 변경된 앨리먼트의 데이터 속성값이 sizing인 값이 존재한다면 가져오고 없다면 빈 문자열 ''을 가져온다.
      const suffix = this.dataset.sizing || '';
      // 사용자 지정 속성의 값을 이벤트가 일어난 앨리먼트의 이름 속성에 값을 설정한다.
      document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
    }
    // 리스트에 있는 앨리먼트를 forEach메서드를 이용해 각 앨리먼트에 이벤트 적용
    inputs.forEach(input => input.addEventListener('change', handleUpdate));
    inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
  </script>

</body>
</html>

2. 주목할 만한 문법

2.1. CSS 사용자 지정 속성

- CSS 사용자 지정 속성은 CSS를 작성하다보면 중복되는 속성값을 작성하는 상황을 자주 겪을 것인데, 이런 상황에서 중복되는 값을 여타 프로그래밍 언어처럼 변수처럼 사용자 지정 속성(변수)에 값을 저장해서 CSS속성 값으로 사용할 수 있는것이다.

- :root{}가 변수를 전역변수처럼 호출 할 수 있도록 선언하는 부분이고, --지정속성명: 값; 형태로 선언을 한다.

- 선언된 값은 앨리먼트에서 css속성의 속성값으로 호출돼 사용되는데, CSS속성명: var(--지정속성명);처럼 호출돼 사용 할 수 있다.

/* :root 의사 클래스에 선언한 지정 속성은 HTML문서 전역에서 접근 가능하다. */
:root{
  /* --지정속성명: 값; */
  --base: #ffc600;
  --spacing: 10px;
  --blur: 10px;
}

img{
  /* css속성명: var(--지정속성명) */
  padding: var(--spacing);
  background: var(--base);
  filter: blur(var(--blur));
}

참고: developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties

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

사용자 지정 CSS 속성 사용하기 (변수) 사용자 지정 속성(CSS 변수, 종속 변수)은 CSS 저작자가 정의하는 개체로, 문서 전반적으로 재사용할 임의의 값을 담습니다. 사용자 지정 속성은 전용 표기법

developer.mozilla.org

2.2. HTML 데이터 속성

- HTML 데이터 속성은 화면에 안보이게 글이나 추가 정보를 앨리먼트에 담아놓을 수 있는 방법이다.

- 정의 방법은 앨리먼트 태그 안에 data- 로 시작해 이름을 붙이면 된다.

<div class="controls">
  <label for="spacing">Spacing:</label>
  <input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">

  <label for="blur">Blur:</label>
  <input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
</div>

- 호출 방법은 javascript에서 접근할 때는 앨리먼트.dataset.데이터 속성명 으로 접근할 수 있다.

// 마우스가 움직이거나 값이 변경된 앨리먼트의 데이터 속성값이 sizing인 값이 존재한다면 가져오고 없다면 빈 문자열 ''을 가져온다.
const suffix = this.dataset.sizing || '';

- CSS에서 접근할 때는 attr(데이터속성명) 으로 접근할 수 있다.

article::before {
  content: attr(data-parent);
}

참고: developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes

데이터 속성 사용하기 - Web 개발 학습하기 | MDN

데이터 속성 사용하기 HTML5 특정 요소와 연관되어 있지만 확정된 의미는 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 디자인되었습니다. data-* 속성은 표준이 아닌 속성이나 추가적인

developer.mozilla.org

2.3. 자바스크립트 이벤트 - change, mousemove

- 해당 앨리먼트 값이 변경될 때 'change', 마우스가 해당 앨리먼트 위를 움직일 때 'mousemove' 이벤트가 발생한다.

- 앨리먼트.addEventListener('이벤트', 함수); 처럼 앨리먼트에 이벤트를 등록해 사용할 수 있으며 등록한 이벤트가 발생했을 때 함수가 실행된다.

// 리스트에 있는 앨리먼트를 forEach메서드를 이용해 각 앨리먼트에 이벤트 적용
inputs.forEach(input => input.addEventListener('change', handleUpdate));
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));

참고: developer.mozilla.org/ko/docs/Web/Events

이벤트 참조 | MDN

이벤트 참조 DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데

developer.mozilla.org