seop's study seop's study

// 01. HTML / CSS 디자인 구성 // 02. 클릭한 카드 뒤집기 // 03. 두개의 뒤집은 카드 확인하기 // 04. 클릭한 카드 두개의 이미지 가져오기 // 05. 두개의 카드 이미지 비교 // 06. 틀린 이미지 애니메이션 효과 주기 // 07. 빨리 클릭하면 버그 발생 처리하기 const cards = document.querySelectorAll(".cards li"); // 카드들 선택자 let cardOne, cardTwo; let disableDeck = false; function flipCard(e){ let clickedCard = e.target; // 클릭한 카드 선택자 if(clickedCard !== cardOne && !disableDeck){ clickedCard..

타자 연습 게임 만들기 const paragraphs = [ "one in four American adults is unvaccinated or only partially vaccinated, and that number isn’t budging much these days. Fewer than 80,000 adults are getting their first shot every day a 96% drop from the more than 2 million a day in April 2021. It’s easy to believe that anyone who hasn’t gotten a shot by now is unlikely to get one in the future—but there is st..

01. 이벤트 메서드 : addEventListener() 01. 이벤트 메서드 : addEventListener('click') : 클릭 했을 때 01. 이벤트 메서드 : addEventListener('scroll') : 스크롤 했을 때 01. 이벤트 메서드 : addEventListener('resize') : 브라우저 사이즈가 변경 됐을 때 01. 이벤트 메서드 : addEventListener('selectstart') : 텍스트 선택을 시작 했을 때 01. 이벤트 메서드 : addEventListener('visibilitychange') : 브라우저의 탭 상태가 변경 됐을 때 01. 이벤트 메서드 : addEventListener('DOMContentLoaded') : 로딩이 끝난 후 01...

01. 요소 메서드 : 선택자 : Document.querySelector() : 요소 선택자 02. 요소 메서드 : 선택자 : Document.querySelectorAll() : 모든 요소 선택자 03. 요소 메서드 : 선택자 : Document.getElementById() : 아이디 요소 선택자 04. 요소 메서드 : 선택자 : Document.getElementByClassName() : 클래스 요소 선택자 01. 요소 메서드 : 요소 : Document.createElement() : 요소 만들기 04. 요소 속성 : 선택자 : Element.firstElementChild : 첫 번째 자식 요소 선택자 04. 요소 속성 : 선택자 : Element.lastElementChild : 마지막 자..

01. 브라우저 객체 : window 객체 메서드 : window.alert() : 알림창 표시하기 02. 브라우저 객체 : window 객체 메서드 : window.confirm() : 확인창 표시하기 03. 브라우저 객체 : window 객체 메서드 : window.prompt() : 입력창 표시하기 04. 브라우저 객체 : window 객체 메서드 : window.open() : 새로운 창 열기 05. 브라우저 객체 : window 객체 메서드 : window.close() : 새로운 창 닫기 06. 브라우저 객체 : window 객체 메서드 : window.focus() : 페이지 포커스 설정 07. 브라우저 객체 : window 객체 메서드 : window.blur() : 페이지 포커스 벗어났을..

01. 수학 메서드 : Math.round() / Math.floor() / Math.ceil() / Math.trunc() 번호 기본값 속성 결괏값 { document.querySelector(".sample01_R1").innerHTML = Math.round(1.34); document.querySelector(".sample01_R2").innerHTML = Math.round(1.64); document.querySelector(".sample01_R3").innerHTML = Math.round(1.5); document.querySelector(".sample01_R4").innerHTML = Math.round(-1.34); document.querySelector(".sample01_R5..

01. 문자열 : 문자열 결합 / 템플릿 문자열 번호 기본값 속성 결괏값 { const str1 = "자바스크립트"; const str2 = "제이쿼리"; document.querySelector(".sample01_R1").innerHTML = str1 + str2; const num1 = 100; const num2 = 200; document.querySelector(".sample01_R2").innerHTML = num1 + num2; const txt1 = "모던"; const txt2 = "자바스크립트"; const txt3 = "핵심"; document.querySelector(".sample01_R3").innerHTML = "나는 "+ txt1 + " (modern)" + txt2 + ..

마우스 이벤트 mouseover메서드와 mouseenter메서드, mouseout메서드와 mouseleave의 차이점 mouseover메서드와 mouseenter메서드, mouseout메서드와 mouseleave의 차이점으로는 자식 요소들까지 영향을 주느냐 안 주느냐의 차이 입니다. 깊이의 차이라고 할 수 있습니다. 마우스가 올라가지는 영역이 지정된 요소 혹은 자신에게만 한정되게 할 것인지, 아니면 자식요소들까지 영역을 확장할 것인지에 대한 차이라고 이해하시면 좋을 것 같습니다. mouseover와 mouseoout은 마우스 이동할때마다 이벤트 발생 하는 반면, mouseenter와 mouseleave는 이벤트 영역을 진입 혹은 벗어났을때만 이벤트를 발생 합니다. move your mouse move y..

이벤트 버블링이란? 버블링(bubbling)의 원리는 간단합니다. 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다. 3개의 요소가 FORM > DIV > P 형태로 중첩된 구조를 살펴봅시다. 요소 각각에 핸들러가 할당되어 있습니다. FORM DIV P 가장 안쪽의 를 클릭하면 순서대로 다음과 같은 일이 벌어집니다. 에 할당된 onclick 핸들러가 동작합니다. 바깥의 에 할당된 핸들러가 동작합니다. 그 바깥의 에 할당된 핸들러가 동작합니다. document 객체를 만날 때까지, 각 요소에 할당된 onclick 핸들러가 동작합니다. 거의 모든 이벤..