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;
    }

    body {
      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))
  2. CSS변수를 통한 이미지, 텍스트 효과 지정
  3. 자바스크립트로 CSS 변수가 작동하도록 코드 작성

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');

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

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

inputs 라는 변수에 controls 클래스 하위의 input 태그들을 담고
handleUpdate()라는 함수에서 suffixinputdata-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 변수의 각각 내용(두개의 range-bar, colorpicker)에서 change 이벤트와 mousemove 이벤트가 일어날때 handleUpdate()를 실행하는 addEventListener메소드를 넣음.
이때 mousemove를 넣지 않으면 range-bar를 드래그 하면서 동시에 결과를 볼수 없고 마우스를 떼야만 결과가 출력되어 두가지를 같이 써주는게 보기가 훨씬 편함

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

filter: blur(~~) - 번짐효과 설정

.dataset - data-~~로 이루어진 내용들 데이터정보 호출 ex) data-sizing속성은 dataset.sizing으로 호출

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

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

--name var(--name) - CSS 변수선언,호출

끝!


'개발 > JavaScript30' 카테고리의 다른 글

5. Flex Panel Gallery  (0) 2017.04.05
4. Array Cardio Day 1  (0) 2017.04.04
3. CSS Variables  (0) 2017.04.03
2. CSS + JS Clock  (0) 2017.04.03
1. JavaScript Drum Kit  (0) 2017.03.30
0. JavaScript30 Challenge  (0) 2017.03.30

+ Recent posts