Javascript30 [03]

03. Playing with CSS Variables and JS

CSS 변수를 사용하여 이미지를 확대 및 축소, 블러 효과, 배경색을 변경할 수 있다.

목표

1.3가지의 input 태그에 대한 CSS 변수를 생성한다.

2.input 태그의 값이 변경될 때, 뷰를 업데이트 하는 함수 생성

3.input 태그의 값이 변경될 때마다 함수를 호출한다.

label 태그

label은 폼의 양식에 이름 붙이는 태그입니다. 주요 속성은 for입니다. label의 for의 값과 양식의 id의 값이 같으면 연결됩니다.

label을 클릭하면, 연결된 양식에 입력할 수 있도록 하거나 체크를 하거나 체크를 해제합니다.

사용자 정의 CSS 속성 (변수 사용하기)

:root 가상 클래스에 변수를 선언해 놓고, CSS 작성자가 해당 변수를 사용할 수 있다.

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

img {
  padding: var(--spacing);
  background: var(--base);
  filter: blur(var(--blur));
}
</style>