Playing with CSS Variables and JS (javascript30 - 3)

Update CSS Variables with JS

#css, js 변수를 업데이트 할 수 있다. (https://github.com/KIMSG/javascript30/blob/master/day3/index.html)

input 태그를 이용하여 값이 변화할 때마다 style을 변화할 수 있습니다.

1 2 3 4 5 6 7 8 9 10 11

<script>       const inputs = document.querySelectorAll('.controls input');         function handleUpdate(){         const suffix = this.dataset.sizing || '';         document.documentElement.style.setProperty('--${this.name}', this.value + suffix);       }       inputs.forEach(input => input.addEventListener('change', handleUpdate));       inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));     </script> Colored by Color Scripter

cs

 

document.querySelectorAll

=> 모든 요소를 선택합니다.

document.documentElement.style.setProperty

=> document의 최상위 요소에 style을 적용시킵니다.

'--${this.name}'

=> ES6의 문법. 템플릿 대입문 (http://hacks.mozilla.or.kr/2015/08/es6-in-depth-template-strings-2/)

이제 문자열 중간에 변수를 사용할 때 귀찮게 + 를 사용하지 않아도 됩니다. 

(하지만 IE 지원이 잘 되지 않기 때문에 사용에 유의해야 합니다.)

     

• 템플릿 대입문에는 어떤 JavaScript 표현도 올 수 있습니다. 함수 호출 구문, 수식 구문 등 모든 구문이 허용됩니다. (만약 원한다면 템플릿 문자열을 다른 템플릿 문자열 안에 포함시키는 것도 가능합니다. 저는 그것을 템플릿 인셉션이라고 부릅니다.)

• 만약 템플릿 대입문에 오는 값이 문자열이 아니라면 그 값은 통상적인 규칙에 따라 문자열로 변환될 것입니다. 위 예제 코드에서 만약 action이 객체라면 해당 객체의 .toString() 메소드가 호출될 것입니다.

• 템플릿 문자열 안에서 백틱 문자를 써야할 필요가 있다면 백슬래쉬 문자를 이용한 이스케이프(escape) 표현을 사용합니다. `\``라고 표현하는 것은 "`"라고 표현하는 것과 동일합니다.

• 마찬가지로, 어떤 이유일지는 모르겠지만 템플릿 문자열 안에서 ${ 2개 문자를 사용해야 한다면 2개 중 한 문자를 백슬래쉬 문자로 이스케이프시켜 표현합니다. `write \${ or $\{`.

forEach

=> 이 문법은 java에서도 사용이 가능합니다. (java 8부터)

1 2 3

str.forEach(function (value) {   console.log(value); });

cs

addEventListener

=> 이벤트등록 권장 방식입니다.   https://opentutorials.org/module/904/6761

1 2 3 4 5 6 7

<input type="button" id="target" value="button" /> <script>     var t = document.getElementById('target');     t.addEventListener('click', function(event){         alert('Hello world, '+event.target.value);     }); </script> Colored by Color Scripter

cs

'=>'  은 화살표 함수표현 이라고 합니다. 

1 2 3

var a2 = a.map(function(s){ return s.length });   var a3 = a.map( s => s.length );

cs

CSS를 변수화 하여 사용할 수 있습니다.

root에 선언하면 건역 변수처럼 선언이 가능합니다.

사용할 때는 var() 의 형식으로 사용하면 됩니다.

1 2 3 4 5 6 7 8 9 10 11 12 13

:root{         --base: #ffc600;         --spacing: 10px;         --blur: 10px;       }       img{         padding: var(--spacing);         background: var(--base);         filter: blur(var(--blur));       }       .h1 {         color: var(--base);       }

cs