네, 충분히 가능합니다!
JavaScript 없이도 손쉽게 인쇄 버튼을 만들 수 있으며, 단순한 텍스트 대신 이미지를 버튼으로 활용하는 것 또한 문제없습니다. 이 방법은 별도의 스크립트 파일이나 복잡한 설정 없이 HTML만으로 구현할 수 있다는 장점이 있습니다.
예제
아래 코드를 실행해 보세요. 이미지 형태의 인쇄 버튼을 만들어, 사용자가 해당 이미지를 클릭하면 브라우저의 인쇄 옵션 창이 자동으로 열리게 됩니다.
라이브 데모
<!DOCTYPE html> <html> <body> <a href="javascript:window.print()"><img src="https://www.tutorialspoint.com/computer_fundamentals/images/inkjet_printer.jpg" height="50" alt="print the page"></a> <p>Click above to print the page.<p> </body> </html>
동작 원리
핵심은 <a> 태그의 href 속성에 javascript:window.print() 값을 지정하는 것입니다. 이렇게 하면 링크를 클릭하는 순간 브라우저의 기본 인쇄 대화상자가 실행됩니다. 링크 안에 텍스트 대신 <img> 태그를 배치하면 이미지 자체가 인쇄 버튼 역할을 하게 됩니다.
구현 시 참고 사항
- alt 속성 활용: 이미지에 적절한 대체 텍스트(alt)를 지정하면 접근성이 향상되고, 화면 낭독기 사용자에게도 버튼의 용도가 전달됩니다.
- 크기 조절: height, width 속성으로 버튼 이미지 크기를 자유롭게 조정할 수 있습니다.
- 스타일링: CSS를 함께 사용하면 마우스 오버(hover) 효과 등을 추가해 더욱 직관적인 버튼을 만들 수 있습니다.