Javascript30. 03 - CSS Variables
2020-01-05
Javascript30
정리: Javascript30을 공부한 내용 기록
03 - CSS Variables
목표
요구사항
- Spacing, blur, color를 선택하면 사진이 변한다.
필요기술
- input의 value를 CSS에 적용한다.
- CSS의 변수를 사용한다.
배운 것
CSS 변수
CSS var()은 변수를 설정할 수 있다.
이 때 root 단위에서 값을 설정하고 변경할 수 있다.
:root {
--base: #ffc600;
--spacing: 10px;
--blur: 10px;
}
img {
background: var(--base);
padding: var(--spacing);
filter: blur(var(--blur));
}CSS style (root)
root에 위치한 CSS 변수는 다음과 같이 변경할 수 있다.
spacing.addEventListener('mousemove', (e) => {
document.documentElement.style.setProperty(
'--spacing',
spacing.value + e.target.attributes['data-sizing'].value
);
});
blur.addEventListener('mousemove', (e) => {
document.documentElement.style.setProperty(
'--blur',
blur.value + e.target.attributes['data-sizing'].value
);
});
base.addEventListener('change', (e) => {
document.documentElement.style.setProperty('--base', base.value);
});👋
