이미지로 디자인한 웹 버튼 만들기: 버튼 태그와 CSS 활용법

이번에는 웹사이트에서 버튼 태그에 이미지를 넣는 법을 알아보겠습니다.

 

1. 버튼 태그 안에 이미지 넣기

img 태그를 이용해 HTML 파일 안에서 바로 해결해 줄 수 있습니다.

<button type="button"">
  <img src="이미지 경로"/>
</button>

---

 

2. 버튼 태그 배경을 이미지로 설정하기

<style> 태그나 CSS 파일을 이용해서 설정할 수 있습니다.

img {
	background: url("이미지 경로") no-repeat;
    width: 10px;
    height: 10px;
}

background: url('이미지 경로')	배경으로 설정할 이미지 경로를 지정한다.
no-repeat	배경 이미지를 반복하지 않는다.
width, height	이미지의 너비와 높이를 결정한다.

 

no-repeat은 background-repeat의 값으로 이미지가 반복되지 않게 한다. 무슨 말이냐면, no-repeat으로 설정하지 않았을 경우에는 이미지가 컨테이너 내부에서 계속 반복해서 채워진다. 이미지가 컨테이너보다 크거나 같다면 상관이 없지만 작을 때는 컨테이너 내부에 작은 사진들이 계속 반복된다.

 

---

두 가지 방법 비교!

1. 버튼 태그 안에 이미지 넣기	2. 버튼 태그 배경을 이미지로 설정하기
img 태그와 주소가 들어가서 html 코드가 지저분해 보일 수 있다.	외부 스타일 시트를 사용하면 html 코드는 버튼 태그만 있으면 되니 깔끔해진다.
이미지 크기를 따로 지정해 주지 않아도 된다.	이미지 크기를 지정해줘야 한다.

 

추천: 2. 버튼 태그 배경을 이미지로  설정하기