[JS] Day 3 - CSS Variables ( JS로 CSS 변수 수정하기! )

초기 상태~!

 

spacing, blur, base Color를 변경하면 사진에 그대로 적용되도록 할 예정!

 

우선 css를 건드려 보았다

이런 느낌으로 갈겁니당

.hl {
    color: #f66687;
}

img {
    width: 50%;
    max-height: 600px;
    object-fit: cover;
    padding: 10px;
    background-color: #f66687;
}

이렇게 기본값으로 고정시키고 각각의 색, spacing을 JS로 변경하려고 했는데 그러면 전체 기본 색이 #F66687로 똑같은데

.hl의 color따로 img의 배경색 따로 변경해줘야 한다.

 

그래서!! 아예 기본 색을 변수로 선언하려고 함.

 

:root와 CSS 변수 (- -base, - -spacing, - -blur)

:root란?

:root는 HTML 문서의 최상위 요소(html)를 의미하는 가상 선택자이다.
즉, 문서 전체에서 사용할 수 있는 전역 CSS 변수를 선언할 때 사용함

💡 :root는 html과 같은 의미지만, CSS 변수를 선언할 때 주로 사용된다

html { /* 가능은 하지만 */
  --color: red;
}

:root { /* 이게 더 일반적 */
  --color: red;
}

CSS 변수 (--base, --spacing, --blur)

:root 안에서 --로 시작하는 변수를 정의

:root {
  --color: #f66687;
  --spacing: 10px;
  --blur: 10px;
}

 

:root에서 선언한 변수들은 CSS 어디서든 사용 가능하다

CSS 변수

CSS에서 변수를 사용할 때는 var(--변수이름)을 사용한다.

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

 

• background-color: var(--color); → 배경색을 핑크색으로 설정
• padding: var(--spacing); → 패딩을 10px로 설정
• filter: blur(var(--blur)); → 흐림 효과(블러)를 10px 적용

CSS 변수를 쓰면 좋은 점

• 유지보수가 편하다 : 변수 하나만 바꾸면 전체 스타일이 자동으로 변경되니깐
• JS와 연동할 때.
  • 변수 사용 안하고 고정된 값 사용 → style.color로 직접 바꿔야 해서 비효율적!
  • CSS 변수 사용 → setProperty()로 전체 스타일을 쉽게 변경 가능하다.
  • 따라서 변경해야 하는 스타일이 많다면 CSS 변수가 훨씬 유리함

 

최종 CSS코드

:root {
    --color: #f66687;
    --spacing: 10px;
    --blur: 10px;
}

.hl {
    color: var(--color);
}

img {
    width: 50%;
    max-height: 600px;
    object-fit: cover;
    padding: var(--spacing);
    background-color: var(--color);
    filter: blur(var(--blur));
}

input[type="range"] { /* input bar 색도 바꾸기 */
    accent-color: var(--color);
}

 

JS에서 변수 값을 수정해보자!

 

우선 변수 값이 각 spacing, blur, base-color input 값으로 수정되게 해야하는데 

input UI를 변경했을 때 값이 어떻게 나오는지 부터 알아야 할거같다.

 

value 값을 가져와서 변수에다 넣어주면 되겠다!

변수 값 수정하기

이벤트가 발생한 <input> 요소의 값(value)을 가져와서 CSS 변수(--변수명)를 업데이트해보자

document.documentElement.style.setProperty('--spacing', '20px');

 이런식으로 js에서 변수를 수정할 수 있다.

  function updateVar (value) {
    document.documentElement.style.setProperty(`--${this.name}`, this.value + 단위추가)
  }

input 요소의 값으로 수정하려면! 이렇게

 

this는 이벤트가 발생한 요소를 가리킨다.

 

이 함수는 input 요소에 addEventListener로 연결되어 있으니까

 

this.dataset.sizing || ''

const unit = this.dataset.sizing || ''; // 'px' 같은 단위 가져오기

여기서 dataset이란?

• dataset은 data-로 시작하는 HTML 속성들을 가져오는 객체이다.
• data-sizing 속성이 있다면 this.dataset.sizing으로 접근할 수 있다.

<input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px"/>

이 input은 data-sizing 속성이 있으므로 "px"를 가져오고 만약 없으면 빈 문자열('')을 사용한다.

 

 

input 변경 이벤트 마다 변수를 수정해주자!

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

change 이벤트란 ?

• change 이벤트는 <input> 값 변경 후 마우스를 떼면 실행

document.querySelector("input").addEventListener("change", () => {
  console.log("값이 변경됨!");
});

 

🔹 마우스로 드래그하여 값이 변해도, 마우스를 떼기 전에는 실행되지 않음.

mousemove 이벤트란?

• mousemove 이벤트는 마우스를 움직일 때마다 발생.
• 특히 <input type="range">에서 마우스를 움직일 때마다 값이 변하는 경우 유용함!

document.querySelector("input").addEventListener("mousemove", () => {
  console.log("마우스를 움직이는 중!");
});

 

🔹 마우스를 움직일 때마다 계속 실행됨!
➡ 즉, change 이벤트보다 더 자주 실행됨.

 

 

전체 JS 코드!

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

function updateVar () {
    const unit = this.dataset.sizing || ""; // 'px' 같은 단위 가져오기
    document.documentElement.style.setProperty(`--${this.name}`, this.value + unit);
}

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

 

 

^-^ 완성