CSS / 이미지 버튼 만들기

CSS

작성일 2026-10-27 최근 수정일 2026-10-27

CSS로 이미지 버튼을 만들려면 실제 <button> 요소에 배경 이미지를 지정하고, 이미지가 들어갈 공간을 padding으로 확보하면 됩니다. 버튼 안의 “검색” 같은 텍스트는 그대로 두면 이미지가 보이지 않아도 기능을 이해할 수 있고 키보드로도 조작할 수 있습니다.

이미지 파일과 버튼 요소 준비하기

돋보기 이미지는 기능을 보조하는 장식으로 사용하고, 버튼의 목적은 HTML 텍스트로 제공합니다. 배경 이미지에는 alt 속성을 붙일 수 없으므로 이미지에만 “검색”이라는 의미를 맡기면 안 됩니다. 클릭 이벤트만 붙인 div 대신 button을 사용하면 기본적인 키보드 조작과 폼 제출 기능을 활용할 수 있습니다.

아래 예제는 이 사이트의 32×32 돋보기 PNG 이미지를 사용합니다. 연습 파일에서는 전체 주소를 그대로 사용할 수 있습니다. 자신의 프로젝트에 적용할 때는 이미지를 images/button-search.png로 저장하고 URL을 바꾸세요. 별도 CSS 파일에서 상대 경로를 쓰면 HTML 파일이 아니라 그 CSS 파일의 위치를 기준으로 찾습니다.

전체 예제: 텍스트가 있는 이미지 버튼

다음 코드를 image-button.html로 저장하고 브라우저에서 엽니다. 외부 돋보기 파일을 불러오므로 이 주소를 사용하는 동안에는 인터넷 연결이 필요합니다. CSS와 HTML을 한 파일에 넣었으며 별도의 라이브러리는 필요하지 않습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>이미지로 꾸민 검색 버튼</title>
  <style>
    body { margin: 20px; font: 16px/1.6 "Noto Sans KR", sans-serif; color: #203348; }
* { box-sizing: border-box; }
    form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; max-width: 520px; }
    label { display: grid; gap: 6px; flex: 1 1 200px; }
    input { width: 100%; min-height: 44px; padding: 8px; border: 1px solid #66798c; font: inherit; }
    .search-button {
      min-height: 44px; padding: 8px 16px 8px 44px;
      border: 1px solid #66798c; border-radius: 6px;
      background: #eef4fa url("https://www.codingfactory.net/wp-content/uploads/button_search.png") no-repeat 8px center / 24px 24px;
      color: #203348; font: inherit; cursor: pointer;
    }
    .search-button:hover { background-color: #dceafa; }
    .search-button:focus-visible { outline: 3px solid #146bcc; outline-offset: 3px; }
    .search-button:active { background-color: #c7dcf4; }
  </style>
</head>
<body>
<h1>검색 버튼 꾸미기</h1>
<form method="get" role="search">
  <label for="query">검색어
    <input id="query" name="q" type="search" required>
  </label>
  <button class="search-button" type="submit">검색</button>
</form>
<p>검색을 누르면 주소의 q 값으로 입력 내용이 전달됩니다. 실제 검색 결과를 조회하는 서버 기능은 포함하지 않습니다.</p>
</body>
</html>

버튼은 옅은 배경 위에 돋보기와 “검색” 텍스트를 표시합니다. 이미지는 24×24 CSS 픽셀로 표시하고 왼쪽 padding은 44px로 잡아 텍스트와 겹치지 않게 했습니다. 버튼의 최소 높이는 44px이며, 폼의 공간이 부족하면 버튼이 다음 줄로 내려갑니다. 이미지 원본 크기와 버튼 전체의 클릭 영역 크기는 서로 다른 값입니다.

마우스·키보드와 제출 결과 확인하기

검색어를 입력하고 검색 버튼을 누르면 현재 파일의 주소에 ?q=입력값이 붙습니다. 이 예제는 GET 방식의 전달 동작을 확인하기 위한 것이며, 검색 엔진이나 결과 페이지를 구현하지 않습니다. 검색어가 비어 있으면 required에 의해 브라우저가 입력을 요청합니다.

Tab 키로 입력칸에서 버튼으로 이동하면 파란 테두리가 나타나야 합니다. 버튼에 초점을 둔 상태에서 Enter 또는 Space 키로 제출할 수 있습니다. 마우스를 올렸을 때는 배경색이 바뀌고 누르는 동안에는 더 진해집니다. 키보드 사용자를 위해 outline을 무조건 제거하지 마세요. 제출용이 아닌 버튼은 type="button"으로 바꿔 폼이 의도치 않게 제출되는 것을 막습니다.

이미지가 안 보이거나 아이콘만 쓰고 싶을 때

이미지가 안 보이면 먼저 이미지 주소를 새 탭에서 열고 개발자 도구의 Network에서 파일 요청을 확인하세요. 그다음 background-size와 padding이 적절한지 확인합니다. 예제 URL을 존재하지 않는 파일 이름으로 잠시 바꾸어도 “검색” 텍스트는 남아 있어야 합니다. 확인 후 원래 주소로 되돌립니다. 텍스트를 화면 밖으로 크게 밀어내는 방법보다 텍스트를 남기는 구성이 유지보수에도 간단합니다.

공간상 아이콘만 표시해야 한다면 버튼에 aria-label="검색"처럼 접근 가능한 이름을 제공하고 이미지와 무관하게 초점 표시와 충분한 클릭 영역을 유지해야 합니다. 내용 이미지로 img를 넣는 경우에도 버튼에 이미 이름이 있다면 장식용 img에는 빈 alt를 주어 같은 기능명이 중복해서 읽히지 않게 합니다.

요소 동작은 MDN의 button 요소 설명, 배경 이미지의 성격과 로딩 실패 시 처리는 MDN의 background-image 설명을 참고할 수 있습니다.

CSS