안녕하세요 NeoDahl 님 ^ ㅡ ^

문의주신 질문에 답변 드려봅니다.

브라우저 기본 동작

원숭이를 클릭했을 때 그림이 사라지는 이유는 <a> 요소의 href 속성 값에 해시(#)가 설정 되어, 클릭할 때 마다 Codepen에서 페이지를 새로고침 하기 때문입니다.

<a href="#" class="link is-monkys">
  <img src="monks-frame-normal.jpg" alt="팔짱 낀 몽키">
</a>

브라우저 기본 동작 차단

이는 브라우저의 기본 동작으로 프로그래밍 방식으로 브라우저의 기본 동작을 차단하면 원숭이를 클릭 했을 때 원숭이 그림이 사라지지 않게 만들 수 있습니다.

브라우저의 기본 동작을 차단하는 방법은 이벤트 핸들러(함수)의 매개 변수로 Event 객체를 받은 후, 전달 받은 Event 객체의 preventDefault() 메서드를 사용하면 기본 동작을 차단할 수 있습니다.

var monkys = document.querySelector('.link.is-monkys');

// 이벤트 핸들러(함수)의 매개변수로 Event 객체 전달  
monkys.onclick = function(event) {

  // 브라우저 기본 동작 차단
  event.preventDefault();

  console.log('원숭이 클릭');

};