snackBar

snackBar

버튼을 누르면 snackBar가 잠깐 보였다 사라진다.

1. html
   button에 onclick="snackBarFunc()"을 적용하고, 보여질 snackBar를 설정한다.
2. css
   snackBar에 visibility와 animation(위치,투명도)을 적용한다.
   snackBar position:aboslute;,visibility:hidden;
   snackBar.show visibility:visible;,animation: fadeIn 0.5s, fadeOut 0.5s 2.5s forwards;
3. js
   button의 onclick에 적용할 함수를 작성한다.

function snackBarFunc() {
    const snackBar = document.querySelector('#snackbar');
    snackBar.classList.add('show');

    setTimeout(function(){
        snackBar.classList.remove('show');
    }, 3500)
}

Why addEventListener?

1. event에 대해 하나 이상의 eventHandler를 추가할 수 있다.
2. bubbling, capturing 설정 가능하다.
3. HTML 요소뿐만 아니라, 모든 DOM 요소에서 작동한다.