button 태그를 디자인 적으로 예쁘게 꾸미기 위해 이미지를 넣어 보는 방법을 알아보자
background-image : url ("경로") 를 이용한다.
이미지를 버튼 크기에 맞춰 반복하고 싶다면 background-repeat 을 사용하면 된다.
background-repeat 의 종류
- repaet - y (세로) ;
- repeat - x (가로) ;
- no-reapeat ;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">
input[type = button]{
width:400px;
height:200px;
}
#b1{
background-color:lavender;
}
#b2{
background-image:url("../img/sun.png")
}
#b3 {
background-image :url("../img/sun.png");
background-repeat: repeat-x;
/* x축(가로)으로 반복하고 싶으면! */
}
#b4 {
background-image :url("../img/sun.png");
background-repeat: repeat-y;
/* y축(세로)으로 반복하고 싶으면! */
}
#b5 {
background-image :url("../img/sun.png");
background-repeat : no-repeat;
background-position : center;
/* center, right bottom, left top. center top, right center */
}
</style>
</head>
<body>
<input type="button" id="b1" value = "button1"><br/>
<input type="button" id="b2" value = "button2"><br/>
<input type="button" id="b3" value = "button3"><br/>
<input type="button" id="b4" value = "button4"><br/>
<input type="button" id="b5" value = "button5"><br/>
</body>
</html>
'Front > css' 카테고리의 다른 글
| [html, css] 홈페이지 따라 만들기 (0) | 2023.03.22 |
|---|---|
| [css] 웹 페이지의 살 붙이기 - border 테두리 꾸미기 (0) | 2023.03.22 |
| [css] 웹 페이지의 살 붙이기 - position (0) | 2023.03.22 |
| [css] 웹 페이지의 살 붙이기 - css파일로 불러오기 (0) | 2023.03.22 |
| [css] 웹 페이지의 살 붙이기 - 요소 선택 (1) | 2023.03.22 |
