윤시의 블로그

1. Login const LoginInput = document.querySelctor('#login-form input');const loginButton = document.querySelector('#login-form button');// 사용자가 로그인 버튼을 클릭했을 때 실행될 함수 정의function onLoginBtnClick() { console.log(loginInput.value);}// 로그인 버튼에 'click' 이벤트 리스너를 추가하고, 클릭 시 위에서 정의한 함수 실행loginButton.addEventListener('click', onLoginBtnClcik);  1) JavaScript에서 submit 이벤트 처리하기   태그를 사용하여 입력 폼을 구현할 때, 사용자가 ..

1. 이벤트 버블링  모달창 배경을 누르면 닫히는 기능을 추가해보자. 모달창 내용  하지만, 배경 뿐만 아니라 모달창 내부의 어떤걸 눌러도 다 닫히게 된다. document.querySelector('.black-bg').addEventListener('click', function(){ document.querySelector('.black-bg').classList.remove('show-modal'); }) 어떤 HTML 태그에 이벤트가 발생하면, 그의 모든 상위요소까지 이벤트가 실행되는 현상을 '이벤트 버블링'이라고 한다.예를 들어, click 이벤트가 있을 때, HTML 태그에 클릭이 발생하면 그 위 모든 상위요소까지 자동으로 클릭이 된다.   1.1 이벤트 리스너 안에서 쓰는 이벤트 ..

1. Alert UI 디자인 html 파일알림창 css 파일.alert-box { 디자인 요소} UI를 평소에 숨기고 싶다면 display: none / visibility: hidden다시 보여주고 싶다면 display : block / visibility: visible  2. 버튼 누르면 Alert UI 보여주기버튼document.getElementById('아이디').style.display = ' ';=> '아이디명'을 클릭했을 때 보여주기  3. function 문법function 자유롭게작명() { 축약할 긴 코드} 알림창알림창 버튼Alert창을 여는 코드를 function을 사용해서 축약 function 알림창열기(구멍) { document.getByElementById('alert').s..