HTML5에서 이미지 버튼 구현하기
HTML5에서 이미지가 포함된 버튼을 만들려면 <button> 요소를 사용하고, 버튼이 닫히는 태그인 </button> 앞에 이미지를 넣어주면 됩니다.
버튼 안에는 텍스트와 이미지를 함께 배치할 수 있어서, 시각적으로 더 매력적인 버튼을 손쉽게 제작할 수 있습니다.
기본 예제 코드
<button type = "submit" name = "learn" value = "myimage">
<p>모두를 위한 튜토리얼</p>
<img src="https://www.tutorialspoint.com/latest/inter-process-communication.png" />
</button>
코드 설명
- type = "submit" : 폼을 제출하는 버튼임을 지정합니다.
- name = "learn" : 서버로 전송될 때 사용되는 버튼의 이름입니다.
- value = "myimage" : 버튼 클릭 시 함께 전송되는 값입니다.
- <img> : 버튼 내부에 표시할 이미지를 정의합니다.
참고 사항
브라우저 기본 스타일 때문에 버튼 주변에 테두리나 여백이 나타날 수 있습니다. CSS를 활용하면 이러한 기본 스타일을 제거하고 이미지에 딱 맞는 깔끔한 버튼을 만들 수 있습니다.
button {
padding: 0;
border: none;
background: none;
cursor: pointer;
}이처럼 HTML5의 <button> 요소를 활용하면 별도의 복잡한 설정 없이도 텍스트와 이미지를 함께 담은 직관적인 버튼을 간단하게 구현할 수 있습니다.