Land of Joe

문자 중간에 변수를 넣고자 한다. 'Where is cat?' 의 사이에 'my'를 삽입하고자 한다 var a = 'my'; console.log('Where is ' + a + ' cat?'); // Where is my cat? 출력됨 위의 예시처럼 변수가 들어갈 자리 양옆으로 문자열을 나누고 + 덧셈기호를 통해 연결하면 된다. 하지만 덧셈기호가 너무 많아 지저분해 보인다. 이를 막기 위해 백틱 기호를 이용해 문자 중간에 변수를 삽입하는 방법이 있다. var a = 'my'; console.log(`Where is ${a} cat?`); // Where is my cat? 출력됨 백틱(``) 안에 ${ 변수명 } 을 넣어주는 것이다 백틱(``)을 이용하면 1. 문자 중간 enter키가 가능하다 2. ..

이벤트 버블링 : HTML 태그에 이벤트가 발생하면 그의 모든 상위요소까지 모두 이벤트가 실행되는 현상 예시) 모달창의 검정배경(클래스명 black-bg)를 누르면 모달창이 닫히게 하고 싶다. 조건: 'show-modal' 클래스의 탈부착을 통해 모달창을 열고 닫음 html 로그인하세요 javascript document.querySelector('.black-bg').addEventListener('click',function(){ document.querySelector('.black-bg').classList.remove('show-modal') }); 이렇게 코드를 짤 경우, 검정배경 뿐만 아니라 화면의 그 어디를 눌러도 모달창은 닫히게 된다. 그 이유가 바로 '이벤트 버블링' 때문이다!!! 위 ..

html Products Information Shipping 상품설명입니다. Product 스펙설명입니다. Information 배송정보입니다. Shipping css ul.list { list-style-type: none; margin: 0; padding: 0; border-bottom: 1px solid #ccc; } ul.list::after { content: ''; display: block; clear: both; } .tab-button { display: block; padding: 10px 20px 10px 20px; float: left; margin-right: -1px; margin-bottom: -1px; color: grey; text-decoration: none; cur..

window.addEventListener('scroll', function(){동작}); window: 현재 html 페이지를 의미함 (document와 비슷하지만 스크롤 이벤트를 감지하고 싶을 때엔 관습적으로 window 사용, window>document) 스크롤 관련 동작으로는 window.scrollY : 위에서부터 얼마나 스크롤했는지 알려줌 (px단위) window.scrollX : 왼쪽에서부터 얼마나 스크롤했는지 알려줌 jQuery 버전: $(window).scrollTop() window.scrollTo(x,y) : 강제로 스크롤바를 움직여서 그 위치에 고정됨 jQuery 버전: $(window).scrollTop(숫자) window.scrollBy(x,y) : 현재 위치에서부터 스크롤 해..

setTimeout() : 일정 시간이 지나면 코드를 실행해주는 자바스크립트의 기본 함수 setInterval() : 일정 시간마다 코드를 실행해주는 자바스크립트의 기본 함수 setTimeout(function(){실행코드}, 시간); setInterval(function(){실행코드}, 시간); 시간은 ms 단위 (1000ms는 1초) setTimeout 예시) 5초 후에 div 박스 사라지게 만들기 5초 이내 구매시 사은품 증정! setInterval 예시) 5초 중 1초마다 숫자 작아지고 타임아웃되면 div 박스 사라지게 만들기 5초 이내 구매시 사은품 증정! countDown이라는 콜백함수를 만들었지만 document.querySelector('.min').innerHTML이 중복되어 코드가 깔끔..