[javascript] 프린트 시에 자바스크립트를 사용하여 웹 페이지의 특정 요소를 회전시키기

14 Dec 2023

javascript

우선, HTML 요소를 생성하고 회전시킬 수 있는 버튼을 추가합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .rotating-element {
      width: 100px;
      height: 100px;
      background-color: #e0e0e0;
      transition: transform 0.5s;
    }
  </style>
</head>
<body>
  <div class="rotating-element">회전할 요소</div>
  <button onclick="rotateElement()">회전</button>

  <script>
    function rotateElement() {
      const element = document.querySelector('.rotating-element');
      element.style.transform = 'rotate(45deg)';
    }
  </script>
</body>
</html>

위의 예제 코드에서는 div 요소를 만들고, 버튼을 클릭하면 해당 요소가 45도로 회전하도록 설정하였습니다. 위 코드를 실행하고 버튼을 클릭하면 요소가 회전하는 것을 확인할 수 있습니다.

이 코드를 통해 자바스크립트를 사용하여 웹 페이지의 특정 요소를 프린트 시에 회전시킬 수 있습니다.