[HTML/CSS] 이미지 버튼(image button) 만들기

웹 화면에 일반적인 버튼을 넣으면 밋밋할 수 있습니다. 버튼을 CSS로 꾸며서 조금 더 멋진 웹 사이트를 만들 수도 있지만 이미지 버튼을 만들 수도 있습니다. 이미지 버튼이란 버튼 모양을 가진 이미지를 의미합니다. 이미지 버튼을 만들기 위해서 단순히 이미지 태그에 onclick 메서드를 걸면 되는 거 아니야?라고 생각할 수 있지만 이미지에는 onclick 메서드가 정상 작동하지 않기 때문에 <button> 태그를 활용해서 코드를 작성해야 합니다. 

 

 이미지 버튼(image button)을 만드는 두가지 방법 만들기 

버튼 태그 안에 이미지 버튼을 포함하는 방법

<button type="button">
  <img src="이미지 파일 경로" alt="대체 텍스트" onclick="" >
</button>

일반적으로 이미지 버튼을 만들기 위해 정보를 찾으면 위와 같은 코드가 나옵니다. 과거에 이미지 버튼을 만들었을 때 주로 사용하던 방식으로 버튼 태그 안에 이미지를 삽입하는 방식입니다. 

 

See the Pen Untitled by wjdxo513 (@wjdxo513) on CodePen.

 

예시로 들면 위와 같습니다. 고양이 이미지 버튼이 만들어졌네요. 이렇게 버튼 태그 안에 이미지 버튼을 넣으면 이미지의 크기를 따로 지정해주지 않아도 자연스럽게 이미지 버튼을 만들 수 있다는 장점이 있습니다. 하지만 쓸데없는 img 태그가 추가로 들어가야 하기 때문에 html코드가 조금 지저분해 보인다는 단점은 존재합니다.

 

버튼 태그의 배경에 이미지를 포함하는 방법

See the Pen 이미지버튼 2 by wjdxo513 (@wjdxo513) on CodePen.

 

두번째 방법으로는 버튼 태그의 배경 이미지를 삽입하는 방법이 있습니다. 저는 이 방법을 주로 선호하며 이렇게 했을 때 위와 같이 html 코드를 깔끔하게 작성할 수 있다는 장점이 있습니다. 이 방법을 사용했을 때는 CSS 코드에 아래의 4가지 코드를 삽입해주어야 합니다.

• background: url() : 버튼 배경 이미지의 경로
• no-repeat; : 배경 이미지를 반복하지 않음
• width: 배경 이미지의 너비
• height: 배경 이미지의 높이