글 작성자: 택시 운전사
반응형


🎨 Day3 - JavaScript로 CSS 업데이트하기

JavaScript 30의 세 번째 프로젝트는 JavaScript를 통해 이미지의 CSS를 업데이트하는 프로젝트이다.


😃 HTML 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>clock</title>
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <h1>UPDATE CSS VARIABLES WITH JS</h1>
    <section class="controls">
      <label for="spacing">Spacing:</label>
      <input
        type="range"
        name="spacing"
        min="10"
        max="200"
        value="10"
        data-sizing="px"
      />
      <label for="blur">Blur:</label>
      <input
        type="range"
        name="blur"
        min="0"
        max="25"
        value="10"
        data-sizing="px"
      />
      <label for="base">Base Color:</label>
      <input type="color" name="base" value="#ffc600" />
    </section>
    <img src="./img/cat.jpg" />
    <footer>
      <p><a href="../">Back to List</a></p>
      <p><a href="https://javascript30.com/">Javascript30</a> Day3</p>
    </footer>
    <script src="main.js"></script>
  </body>
</html>
 
cs

😃 CSS 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
:root {
  --base: #ffc600;
  --spacing: 10px;
  --blur: 10px;
}
img {
  width: 20rem;
  padding: var(--spacing);
  background: var(--base);
  filter: blur(var(--blur));
}
h1 {
  color: var(--base);
}
body {
  text-align: center;
  background-color: #ff3cac;
  background-image: linear-gradient(
    225deg,
    #ff3cac 0%,
    #784ba0 50%,
    #2b86c5 100%
  );
  background-size: auto 130%;
  background-position: center center;
  min-height: 100vh;
}
.controls {
  margin-bottom: 50px;
}
 
cs

:root의 --base와 --spacing 그리고 --blur 부분이 핵심이다 React에서 scss도 쓰고 styled-components도 쓰다보니 굉장히 생소했다. React에서의 해법에 비하면 간단하지는 않았다. 

😃 JavaScript 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
const inputs = document.querySelectorAll(".controls input");
 
handleUpdate = e => {
  const suffix = e.target.dataset.sizing || "";
  document.documentElement.style.setProperty(
    `--${e.target.name}`,
    e.target.value + suffix
  );
};
 
inputs.forEach(input => input.addEventListener("change", handleUpdate));
inputs.forEach(input => input.addEventListener("mousemove", handleUpdate));
 
cs


저번과 같이 Arrow function을 썼기 때문에 this~로 짠 부분은 모두 e.target~으로 바꾸었다. React에서는 onChange로 해결되지만 JavaScript에서는 change와 mousemove 둘 다 EventListener에 추가해주어야 정상적으로 작동한다.


링크


반응형
저작자표시

'Web > JavaScript' 카테고리의 다른 글

[JavaScript] 🖼️ JavaScript로 Flexbox를 이용한 이미지 갤러리 만들기  (0) 2019.02.05
[JavaScript] 💪 Array관련 Method 완전정복 1탄  (0) 2019.02.05
[JavaScript] ⌚ JavaScript로 시계만들기  (0) 2019.02.03
[JavaScript] 🎹 JavaScript로 악기 만들기  (0) 2019.02.02
📅 30일간 30개의 JavaScript 프로젝트 도전기 / JavaScript 30  (0) 2019.02.02

티스토리툴바