[javascript] 자바스크립트로 프린트 시에 호버 효과를 추가하는 방법

14 Dec 2023

javascript

프린트 버튼을 클릭했을 때 사용자에게 호버 효과를 제공하는 것은 프린트 기능을 개선하고 사용자 경험을 향상시키는 데 도움이 될 수 있습니다. 자바스크립트를 사용하여 이러한 효과를 구현하는 방법에 대해 알아보겠습니다.

HTML

우선, 버튼과 프린트할 내용이 담긴 요소를 HTML로 작성하겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>프린트 호버 효과</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <button id="printButton">프린트</button>
  <div id="printContent">
    <!-- 프린트할 내용 -->
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS

다음으로, 호버 효과를 적용하기 위해 CSS를 작성하겠습니다.

/* styles.css */
#printButton:hover {
  /* 호버 효과 스타일 지정 */
  /* 예: 배경색 변경, 텍스트 색상 변경 등 */
}

JavaScript

프린트 버튼에 호버 효과를 추가하려면 자바스크립트로 버튼 요소에 이벤트를 추가해야 합니다.

// script.js
document.getElementById('printButton').addEventListener('mouseenter', function() {
  // 호버 시에 적용할 동작 구현
  // 예: 프린트 버튼 스타일 변경, 프린트할 내용에 효과 추가
});

document.getElementById('printButton').addEventListener('mouseleave', function() {
  // 호버가 끝났을 때 적용할 동작 구현
  // 예: 프린트 버튼 스타일 초기화, 프린트할 내용 효과 제거
});

이제 프린트 버튼을 호버할 때 특정 동작을 추가하여 사용자에게 시각적인 피드백을 제공할 수 있습니다.

HTML

CSS

JavaScript

참고 자료