image.png

개요

range, color input 태그에 이벤트 리스너를 달아보자.

배운 점

  1. CSS 내에서의 변수 값 사용
    :root {
      --base: #ffc600;
      --spacing: 10px;
      --blur: 10px;
    }

    img {
      padding: var(--spacing);
      background: var(--base);
      filter: blur(var(--blur));
    }
  • :root 문서의 최상위 단계에 정의되는 요소.
  • -- 키워드를 통해 CSS 에서 변수를 사용할 수 있습니다.
  1. 여러 종류의 CSS 단위에 대응하기 위해 태그에 dataset 을 활용할 수 있습니다.

추가적으로 찾아볼 것 & 후기

  • CSS property 에 대한 추가 확인
  • CSS 에서도 변수를 쓸 수 있을 것이라고 생각했는데 이번 실습을 통해 배울 수 있었습니다.

참고자료