<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>종합예제</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Bungee+Spice&display=swap');
.btn {
width:400px; height:50px; margin-left:100px; margin-top:100px;
font-family: 'Bungee Spice', cursive;
font-size:32px; color:#FFF; text-align:center; line-height:50px;
text-shadow:1px 1px 2px #000;
background:linear-gradient(to bottom, #ebf1f6 0%,#06f 100%);
border:1px solid #FFF; border-radius:25px;
box-shadow:0 0 30px #3CF;
}
/*★스타일시트 작성 시 유의점:스타일 속성과 스타일 값을 작성하면 바로 웹 브라우저에서 확인하라.★*/
.box {
width:300px; height:199px; margin-left:100px; margin-top:100px;
background:url(imgs/halla.jpg);
}
.box h2 { /*빈칸은 후손(자식+손자) 선택자이다.*/
height:80px; /*박스의 높이를 지정*/
font-size:18px; color:#FFF; /*텍스트의 크기와 색상을 지정*/
text-align:center; line-height:80px; /*텍스트를 수평/수직 중앙정렬*/
text-shadow:1px 1px 1px #000; /*가로 그림자 크기, 세로 그림자 크기, 번짐크기, 그림자 색상*/
text-transform:capitalize; /*영문자의 첫글자만 대문자*/
background:rgba(125, 15, 15, 0.4); /*어두운 빨간색에 투명도 60% 적용*/
}
</style>
</head>
<body>
<div class="btn">This is CSS3 Buttons</div>
<div class="box">
<h2>background image color test</h2>
</div>
</body>
</html>