[Javascript 30] 3. CSS-Variable

tino-kim·2022년 3월 11일
CSSJavaScriptfrontendhtmljavascript30jsvanilla jswesBos
1
post-thumbnail

💗 [Javascript 30] 3. CSS-Variable

✔✔ 굳~~이 css variable을 사용하는 이유
❗❗ css variable이 .js로 업데이트 될 수 있음. 계속 수정하는 것을 줄이기 위해서 css variable을 이용해야 한다. ❗❗

이런 느낌으로 만들어주면 된다. (이거는 보스님이 만든 것이다.. 나는 이러한 형태로 만들되 내 스타일로 만들 것이다.)


나는 이런 느낌으로 제작하였다..

✔ 레이아웃 짜기.

이런 느낌으로 짤 것이다. 또 flex-box를 이용해서 옆으로 나란히 놓아줄 것이다.

✔ HTML 코드 작성하기.

✔ label과 input

  • label: for를 이용해서 input과 연결시킬 수 있다.
  • input: name을 이용해서 input과 연결시킬 수 있다.
    type은 color(색상표를 제공)와 range(정도를 지정)를 이용하였다.

💙 for=""와 name="" 같으면 label과 input을 연결시킬 수 있다.

💙 코드 작성 순서
1. (중요) HTML & CSS 위주로 먼저 찾아보고, 도저히 없는 경우에 JS 이용하기. HTML & CSS를 이용하는 것이 성능적으로 더욱 좋기 때문이다.
그래서 "어떻게 해야 블러 처리가 되고 테두리가 넓어지고 색상이 변경되는지" 생각했다.

  • 블러 처리 - filter:blur() 이용하기.
  • 테두리 처리 - padding 이용하기.
  • 색상 변경 - background-color 이용하기.
  padding: var(--spacing); /* spacing를 의미한다. */
  background: var(--baseColor); /* 선 색깔을 의미한다. */
  filter: blur(var(--blur)); /* blur를 의미한다. */
  /* value가 10px이였으니, 맞춰줘서 CSS-Variable을 제작하였다. */

위의 변수들은 css-variable을 이용해서 정의된 변수들이다.
2. HTML & CSS로 코드 작성하는 것이 끝났다면 JS로 코드를 작성해야한다. ❗ 정적인 부분과 이벤트를 연결시켜서 인터렉티브하게 만드는 것이 JS의 역할이다. ❗ 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Varible :: Javascript 30</title>
    <link rel="stylesheet" href="style cssVariable.css" />
  </head>
  <body>
    <h1>Update CSS Variable</h1>
    <div class="control">
      <div class="controller">
        <label for="spacing">Spacing : </label>
        <input
          type="range"
          name="spacing"
          min="0"
          max="5"
          step="0.5"
          value="0"
        />
      </div>
      <div class="controller">
        <label for="blur">Blur : </label>
        <input type="range" name="blur" min="0" max="5" step="0.5" value="0" />
      </div>
      <div class="controller">
        <label for="baseColor">Base Color : </label>
        <input type="color" name="baseColor" value="#AC92ED" />
        <!-- input에 색상표도 있을 줄 몰랐었다. -->
      </div>
    </div>
    <img src="flower.jpg" alt="flower" />
  </body>
</html>

✔ CSS로 스타일 지정하기.

flex-box를 위주로 이용하고, 간격을 띄우고 싶은 경우에는 margin과 padding을 이용하자.

@import "reset.css";
@import url("https://fonts.googleapis.com/css2?family=Gaegu&display=swap");

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f6b1b9;
  font-family: "Gaegu", cursive;
}

h1 {
  padding: 30px;
  font-size: 60px;
  font-weight: bold;
  color: #f6f7fb;
}

.control {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.controller {
  font-size: 30px;
  padding: 8px 20px;
  font-weight: bold;
}

/* 이미지 부분을 변경할 것이기 때문에 여기서 지정해주기. */

img {
  width: 800px;
  height: 500px;
  margin: 20px;
  border: 5px solid #fffb33;
}

✔ CSS-Variable 이용하기.

일단, 내가 알고있는 관점에서는 한꺼번에 수정이 가능하기 때문에 용이해서 사용을 많이 하는 것으로 알고 있다. 하지만 이 예제에서는 인터렉티브한 부분을 그 변수와 연결시켜서 그 변수가 조정될 수 있도록 이용하는 것 같았다. (계속 update 시켜주기.)

  • 이미지 부분을 변경할 것이기 때문에 img 태그에서 지정해주기.
  • 인터렉티브한 부분이 색상과 관련이 있기 때문에, css variable을 색상으로 등록해주었다.
  • value 값을 설정해놓은 것을 기반으로 해서, css variable을 정해주기.
:root {
  /* CSS Variable 이용하는 것이 중요하다. */
  --background-color: #f6b1b9;
  --header-color: #f6f7fb;
  /* 밑에 3개가 인터렉티브한 부분을 만들어 주는 부분이다. */
  --border-color: #fffb33;
  --spacing: 10px;
  --blur: 10px;
}

밑에 있는 코드도 모두 css variable을 이용해서 변경시켜주기.

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--background-color);
  font-family: "Gaegu", cursive;
}

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

h2 {
  padding: 30px;
  font-size: 60px;
  font-weight: bold;
  color: var(--header-color);
}

.control {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.controller {
  font-size: 30px;
  padding: 8px 20px;
  font-weight: bold;
}

img {
  width: 800px;
  height: 500px;
  margin: 20px;
  padding: var(--spacing); /* spacing를 의미한다. */
  background: var(--border-color); /* 선 색깔을 의미한다. */
  filter: blur(var(--blur)); /* blur를 의미한다. */
  /* value가 10px이였으니, 맞춰줘서 CSS-Variable을 제작하였다. */
}

✔ Javascript 코드 작성하기.

💙 코드 작성 순서

  1. 필요한 부분을 가져온다. 물론 document.querySelector를 사용해도 되지만, input 부분을 모두 가져와야 하기 때문에 document.querySelectorAll을 이용한다.
const inputs = document.querySelectorAll(".controller input");
  1. 가져와서 보니까 node listener이기 때문에, forEach를 이용해서 Array 형태로 만든 이후 addEventListener를 이용해서 원하는 이벤트 함수와 타입을 연결시켜준다. (Array 형태로 사용하는 것이 훨씬 편리하다.)

// inputs.forEach((input) => console.log(input));
inputs.forEach((input) => input.addEventListener("change", handleUpdate));
// input의 값이 변경되는 경우에 change를 이용한다.
// drag 되는 경우도 고려해야 하기 때문에, mousemove도 추가해주기.
inputs.forEach((input) => input.addEventListener("mousemove", handleUpdate));
  1. 함수를 정의 ➕ this의 개념의 등장

함수를 정의해줘야 하는데, 일단 그 함수는 range의 data의 값에 의해서 "어느 정도로 변하는지" 지정이 된다. ➕ 색상에는 단위가 없고, spacing과 blur에는 단위가 존재하기 때문에 단위도 고려해야한다. (dataset에 sizing을 추가해서 단위를 고려하도록 만들어주기.)

  • 값을 구해야된다.
  • 단위를 고려해야한다. 그래서 변수로 만들었다. (OR 연산자 이용하기.)

그런데 data 값이 변할 때마다 변하는 정도가 달라지기 때문에, setProperty 메서드를 이용한다. 

setProperty(변하는 것에 대한 이름, 데이터 + 단위)

이름은 모두 css-variable을 이용해서 처리했으니 그것을 가져다가 쓰면 된다.

function handleUpdate(event) {
  // console.log(event);
  // console.log(this);
  // console.log(this.value);
  // console.log(this.dataset.sizing); 없는 경우에는 undefined가 출력된다.
  const unit = this.dataset.sizing || "";
  document.documentElement.style.setProperty(
    `--${this.name}`,
    this.value + unit
  );
}

✔ 최종 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Varible :: Javascript 30</title>
    <link rel="stylesheet" href="style cssVariable.css" />
  </head>
  <body>
    <h2>Update CSS Variable with <span class="h1">JS</span></h2>
    <!-- JS도 나중에 색깔 변경되어야 하기 때문에 이렇게 해야된다. -->
    <div class="control">
      <div class="controller">
        <label for="spacing">Spacing : </label>
        <input
          id="spacingCtr"
          type="range"
          name="spacing"
          min="10"
          max="200"
          value="10"
          data-sizing="px"
        />
        <!-- 단위 추가해주기. -->
      </div>
      <div class="controller">
        <label for="blur">Blur : </label>
        <input
          id="blurCtr"
          type="range"
          name="blur"
          min="0"
          max="25"
          value="10"
          data-sizing="px"
        />
        <!-- 단위 추가해주기. -->
      </div>
      <div class="controller">
        <label for="baseColor">Base Color : </label>
        <input
          id="baseColorCtr"
          type="color"
          name="baseColor"
          value="#fffb33"
        />
        <!-- input에 색상표도 있을 줄 몰랐었다. -->
      </div>
    </div>
    <img src="flower.jpg" alt="flower" />
    <script src="app cssVariable.js" defer></script>
  </body>
</html>
@import "reset.css";
@import url("https://fonts.googleapis.com/css2?family=Gaegu&display=swap");

:root {
  /* CSS Variable 이용하는 것이 중요하다. */
  --background-color: #f6b1b9;
  --header-color: #f6f7fb;
  /* 밑에 3개가 인터렉티브한 부분을 만들어 주는 부분이다. */
  --baseColor: #fffb33; /* name */
  --spacing: 10px; /* name */
  --blur: 10px; /* name */
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--background-color);
  font-family: "Gaegu", cursive;
}

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

h2 {
  padding: 30px;
  font-size: 60px;
  font-weight: bold;
  color: var(--header-color);
}

.control {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.controller {
  font-size: 30px;
  padding: 8px 20px;
  font-weight: bold;
}

/* 이미지 부분을 변경할 것이기 때문에 여기서 지정해주기. */

img {
  width: 800px;
  height: 500px;
  margin: 20px;
  padding: var(--spacing); /* spacing를 의미한다. */
  background: var(--baseColor); /* 선 색깔을 의미한다. */
  filter: blur(var(--blur)); /* blur를 의미한다. */
  /* value가 10px이였으니, 맞춰줘서 CSS-Variable을 제작하였다. */
}
/*
const spacingCtr = document.querySelector("#spacingCtr");
const blurCtr = document.querySelector("#blurCtr");
const baseColorCtr = document.querySelector("#baseColorCtr");

물론 이렇게 해도 되지만, querySelectorAll을 이용하는 것이 좋다.
*/

const inputs = document.querySelectorAll(".controller input");
// console.log(inputs);

// inputs.forEach((input) => console.log(input));
inputs.forEach((input) => input.addEventListener("change", handleUpdate));
// input의 값이 변경되는 경우에 change를 이용한다.
// drag 되는 경우도 고려해야 하기 때문에, mousemove도 추가해주기.
inputs.forEach((input) => input.addEventListener("mousemove", handleUpdate));

function handleUpdate(event) {
  // console.log(event);
  // console.log(this);
  // console.log(this.value);
  // console.log(this.dataset.sizing); 없는 경우에는 undefined가 출력된다.
  const unit = this.dataset.sizing || "";
  document.documentElement.style.setProperty(
    `--${this.name}`,
    this.value + unit
  );
}

😀 마무리...

사실 css-variable을 꼭 써야하는 이유는 잘 모르겠다. 정리하면, 원리는 input에서 range에 데이터의 정도에 따라서 달라지기 때문에 그 부분이 변수가 되어야 한다. 근데 node listener 이기 때문에 array로 바꾸기 위하여 forEach를 이용해서 addEventListener로 연결해준다. 그리고 이벤트를 주고자 하는 함수를 제작하자. 그 함수의 목표는 "변하는 정도에 따라 스타일을 제공" 이다. 단위가 필요한 부분도 있고, 없는 부분도 있으니 단위를 변수로 만들어야하고, data 값도 가져와야 한다. 그리고 data 값에 따라 변하기 때문에 setProperty를 이용해서 처리해주자.

profile
Tino-Kim
알고리즘과 웹 개발을 공부하는 대학생
이전 포스트

(학교) 소셜네트워크분석 가상환경 생성하기

다음 포스트

[Javascript 30] 4. JS Array Cardio Practice Day1

0개의 댓글