3. CSS Variables ( JavaScript30 )

Dev/JavaScript30

3. CSS Variables ( JavaScript30 )

takeU 2021. 7. 7. 14:24

3. CSS Variables

CSS 변수 활용

기본코드

<!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>
      /* 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>
      </script>
    </body>
</html>

목표

사진에서 두가지의 레인지 조절 기능과 colorpicker 넣기

과정

1. CSS 변수를 만든다(base색상, 기본 여백(spacing), 기본 흐림정도(`blur))

:root {
    --base: #ffc600;
    --spacing: 10px;
    --blur: 10px
}

:root - HTML 요소중 가장 상위 요소에 적용한다는 뜻
--base - base라는 CSS 변수를 생성
위와같이 :root에 변수를 선언하는 것은 전역변수를 생성한다는 뜻

2. CSS변수를 통한 이미지, 텍스트 효과 지정

img {
    padding: var(--spacing);
    background: var(--base);
    filter: blur(var(--blur));
}

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

변수를 불러올 때 var(--spacing)과 같이 불러옴

3. 자바스크립트로 CSS 변수가 작동하도록 코드 작성

const inputs = document.querySelectorAll('.controls input');

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

inputs 변수에 controls 클래스 하위의 input 태그들을 담고
handleUpdate() 함수에서 suffix에 input중 data-sizing 또는 공백을 담는다.

위의 HTML코드를 보면 range-bar로 이루어진 두개의 input태그는 data-sizing="px"이고 colorpicker input태그는 data-sizing속성이 존재하지 않기 때문에 둘을 or연산자로 엮어서 suffix에 담은 것

document.documentElement.style.setProperty(--${this.name}, this.value +suffix);

document의 최상위 태그 html에 style 요소를 부여하고 그 내용을 name: value로 채움

(글로 적으려니 정리가 안돼서 어려워 보이지만 직접 코드를 보면 이해가 쉬움)

inputs.forEach(input => input.addEventListener('change', handleUpdate));
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));

마지막 코드는 inputs 변수의 각각 내용(두개의 range-bar, colorpicker)에서 change 이벤트와 mousemove 이벤트가 일어날때 handleUpdate()를 실행하는 addEventListener메소드를 넣음.
이때 mousemove를 넣지 않으면 range-bar를 드래그 하면서 동시에 결과를 볼수 없고 마우스를 떼야만 결과가 출력되어 두가지를 같이 써주는게 보기가 훨씬 편함

찾아본 내용, 알게된 내용들

.dataset - data-~~로 이루어진 내용들 데이터정보 호출

ex) data-sizing속성은 dataset.sizing으로 호출

document.documentElement.style.setProperty - document의 최상위 요소에 style 요소 적용 후 속성 적용

:root - HTML 최상위 요소 선택자

저작자표시 비영리 변경금지

현재글3. CSS Variables ( JavaScript30 )

takeU