HTML에서 이미지 버튼을 수동으로 삽입하는 방법을 알아보겠습니다. CSS의 background-image 속성을 활용하여 버튼에 이미지를 추가할 수 있습니다.
예제 코드
HTML
|
1
|
<input type="button" value="Add a new row" class="button-add" />
|
cs |
CSS
|
1
2
3
4
5
6
7
8
9
10
11
|
input.button-add {
background-image: url(/images/buttons/add.png); /* 16px x 16px */
background-color: transparent; /* make the button transparent */
background-repeat: no-repeat; /* make the background image appear only once */
background-position: 0px 0px; /* equivalent to 'top left' */
border: none; /* assuming we don't want any borders */
cursor: pointer; /* make the cursor like hovering over an <a> element */
height: 16px; /* make this the size of your image */
padding-left: 16px; /* make text start to the right of the image */
vertical-align: middle; /* align the text vertically centered */
}
|
cs |
설명
• background-image: 버튼의 배경에 이미지를 삽입합니다.
• background-color: 버튼 배경색을 투명하게 만들어 이미지가 선명하게 보이도록 합니다.
• background-repeat: 배경 이미지가 반복되지 않도록 설정하여 이미지를 한 번만 표시합니다.
• background-position: 배경 이미지의 위치를 조정합니다. 0 0은 좌상단을 의미합니다.
• border: 버튼의 기본 테두리를 제거하여 깔끔한 디자인을 만듭니다.
• cursor: 마우스 오버 시 포인터 커서로 변경하여 클릭 가능한 요소임을 나타냅니다.
• height: 버튼의 높이를 이미지의 높이와 일치시켜 일관성을 유지합니다.
• padding-left: 이미지와 텍스트 사이에 간격을 두어 가독성을 높입니다.
• vertical-align: 텍스트를 수직으로 중앙 정렬하여 버튼 내부의 요소들이 균형 있게 배치되도록 합니다
추가 팁
• 이미지 크기 조정: 이미지의 크기에 맞게 height와 padding-left 값을 조정해야 합니다.
• 반응형 디자인: 다양한 화면 크기에 대응하려면 미디어 쿼리를 사용하여 스타일을 조정할 수 있습니다.
• 접근성 고려: aria-label 등을 사용하여 스크린 리더 사용자에게도 버튼의 기능을 명확히 전달합니다.
참고 자료
• Stack Overflow: HTML/CSS - How to add image/icon to input type=“button”?
http://stackoverflow.com/questions/2920076/html-css-how-to-add-image-icon-to-input-type-button