HTML 버튼에 이미지를 삽입하는 방법

HTML 버튼에 이미지를 넣으려면 <button> 안에 <img>를 중첩하세요. 이는 메뉴 열기나 변경 사항 저장과 같은 작업에 일반적으로 선택하는 방식입니다. 이미지로 양식을 제출해야 할 때는 <input type="image">를 사용하세요. 두 컨트롤의 목적은 서로 다릅니다. type="image"는 <button>의 유효한 type이 아닙니다.

예제에서는 마크업과 CSS를 보여 줍니다. 제공된 런타임은 브라우저 페이지를 렌더링하지 않으므로, 첫 번째 예제는 페이지에 배치할 마크업을 출력합니다. 시각적 결과를 주장하지 않습니다.

네이티브 HTML 버튼에 이미지 추가하기

일반적인 작업에는 <img>를 포함하는 네이티브 <button>을 사용하세요. 다음의 작은 JavaScript 예제는 번들로 제공되는 이미지 리소스를 가진 버튼 요소를 출력합니다. 버튼 자체에 접근 가능한 이름이 있으므로 이미지는 장식용입니다.

const button = '<button type="button" aria-label="Save"><img src="button-image.webp" alt=""></button>';
console.log(button);

<button type="button" aria-label="Save"><img src="button-image.webp" alt=""></button>

src 값은 이 문서 번들에 있는 이미지에 대한 상대 경로입니다. 예제를 응용할 때는 자신의 이미지 경로로 바꾸세요. type="button"은 양식 안에서 중요합니다. 명시적인 type이 없으면 버튼은 일반적으로 관련 양식을 제출합니다. 이미지 자체가 작업을 전달하고 다른 레이블이 없을 경우, <img src="button-image.webp" alt="Save">와 같이 의미 있는 대체 텍스트를 이미지에 부여하고 aria-label은 생략하세요. 보이는 텍스트가 이미 작업을 명명하고 있다면, 빈 alt는 중복되는 이미지가 그 이름을 반복하지 않게 합니다. 이미지와 버튼에 동일한 접근 가능한 레이블을 부여하지 마세요.

네이티브 버튼은 키보드 활성화와 포커스 동작을 제공합니다. 사용자 지정 스타일을 적용할 때는 키보드 사용자가 어떤 컨트롤이 활성화되어 있는지 알 수 있도록 보이는 포커스 표시기를 유지하세요.

양식 제출에 이미지 input 사용하기

이미지를 활성화했을 때 관련 양식을 제출해야 한다면 <input type="image">를 선택하세요. 중첩된 이미지가 있는 네이티브 버튼과 달리, 이것은 그 자체가 제출 컨트롤이며 중첩된 <img>가 없습니다. 그 src는 이미지를 가리키고, 그 alt 값은 컨트롤의 이름을 지정합니다. 예를 들어, 인라인 양식 <form action="/search" method="get"><label for="query">Search</label><input id="query" name="q"><input type="image" src="button-image.webp" alt="Search"></form>은 이미지 컨트롤이 활성화되면 검색 요청을 보냅니다. 양식 대상과 이미지 경로는 자신의 페이지에 맞게 조정하세요.

이미지 input은 양식 제출과 제약 조건 검증에 참여합니다. 활성화되면 브라우저는 클릭 좌표도 컨트롤 이름 뒤에 .x와 .y를 붙여 제출합니다. 서버가 해당 값이 필요하면 name을 추가하세요. 양식의 action과 method는 기본 대상과 요청 메서드를 설정합니다. 이미지 input의 formaction과 formmethod는 해당 제출에 대해 이러한 기본값을 재정의할 수 있습니다. 이미지 input은 양식 작업에 사용하고, 일반적인 인터페이스 버튼의 대체재로 사용하지 마세요.

이미지 버튼 스타일 지정 및 크기 조정하기

네이티브 버튼에 클래스를 적용한 다음, 중첩된 이미지의 크기를 조정하세요. 테두리 없는 아이콘 버튼은 padding: 0; border: 0; background: transparent;를 사용할 수 있고, 이미지는 display: block; width: 2rem; height: 2rem; object-fit: contain;을 사용할 수 있습니다. 이러한 CSS 선언은 인라인 구문 예시입니다. 페이지의 스타일시트나 <style> 요소에 추가하세요. 주변 컨트롤에 맞는 치수를 선택하세요. object-fit: contain은 전체 이미지가 상자 안에 보이도록 유지합니다. 유연한 이미지에는 max-width: 100%; height: auto;를 사용해 비율을 유지하면서 축소되게 하세요.

button:hover와 button:focus-visible 등을 사용해 마우스 오버 피드백을 제공하고 키보드 포커스 스타일을 유지하세요. 배경, 테두리 또는 패딩은 텍스트와 이미지로 이루어진 컨트롤을 상호작용 가능한 것으로 인식하기 쉽게 만들 수 있습니다. 그에 상응하는 명확한 포커스 처리를 제공하지 않는 한 브라우저 아웃라인을 제거하지 마세요. 이미지 input도 CSS를 통해 크기를 조정할 수 있지만, 그 규칙은 중첩된 이미지가 아니라 해당 input 요소에 적용됩니다.

이미지 및 양식 속성 선택하기

이미지 파일에는 src를 사용하고, 접근 가능한 이름에는 alt를 사용하세요. 이미지가 보이는 텍스트나 다른 접근 가능한 레이블 이상의 정보를 추가하지 않을 경우 alt에 빈 값을 설정합니다. 의도한 이미지 치수를 알고 있을 때는 width와 height를 그 치수로 설정하세요. 이는 레이아웃 공간을 확보하고, CSS는 더 좁은 레이아웃에 맞춰 렌더링 크기를 조정할 수 있습니다. 작업이 다른 곳에 명시되어 있지 않은 유용한 아이콘의 경우, 작업이나 목적을 정확히 설명하는 대체 텍스트를 선택하세요.

<input type="image">의 경우, form 속성은 해당 양식의 ID를 사용해 문서의 다른 위치에 있는 양식과 컨트롤을 연결할 수 있습니다. formaction, formmethod, formenctype, formnovalidate, formtarget은 이 제출 컨트롤에 대해 해당 양식 설정을 재정의합니다. 재정의는 이 이미지 input에 다른 제출 동작이 필요할 때만 사용하세요. 이러한 양식 속성은 네이티브 <button>을 이미지 input으로 바꾸지 않으며, 버튼의 중첩된 <img>에도 적용되지 않습니다.