<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>이미지 카드</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
background:#111827;
}
.box{
width:700px;
height:500px;
border:5px solid white;
border-radius:20px;
background:
linear-gradient(
rgba(0,0,0,.1),
rgba(0,0,0,.6)
),
url("https://www.alleycat.org/wp-content/uploads/2019/03/FELV-cat.jpg");
background-size:cover;
background-repeat:no-repeat;
background-position:center;
overflow:hidden;
transition:.4s;
/* 핵심 */
display:flex;
align-items:flex-end;
}
.box:hover{
transform:scale(1.03);
}
/* 텍스트 박스 */
.text-box{
padding:35px;
color:white;
}
/* 제목 */
.text-box h2{
font-size:40px;
margin-bottom:10px;
text-shadow:0 3px 10px rgba(0,0,0,.7);
}
/* 설명 */
.text-box p{
font-size:18px;
color:#ddd;
line-height:1.6;
}
</style>
</head>
<body>
<div class="box">
<div class="text-box">
<h2>고양이 이야기</h2>
<p>
귀엽고 따뜻한 친구와 함께하는 시간
</p>
</div>
</div>
</body>
</html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>이미지 카드</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
background:#111827;
}
.box{
width:700px;
height:500px;
border:5px solid white;
border-radius:20px;
background:
linear-gradient(
rgba(0,0,0,.1),
rgba(0,0,0,.6)
),
url("https://www.alleycat.org/wp-content/uploads/2019/03/FELV-cat.jpg");
background-size:cover;
background-repeat:no-repeat;
background-position:center;
overflow:hidden;
transition:.4s;
/* 핵심 */
display:flex;
align-items:flex-end;
}
.box:hover{
transform:scale(1.03);
}
/* 텍스트 박스 */
.text-box{
padding:35px;
color:white;
}
/* 제목 */
.text-box h2{
font-size:40px;
margin-bottom:10px;
text-shadow:0 3px 10px rgba(0,0,0,.7);
}
/* 설명 */
.text-box p{
font-size:18px;
color:#ddd;
line-height:1.6;
}
</style>
</head>
<body>
<div class="box">
<div class="text-box">
<h2>고양이 이야기</h2>
<p>
귀엽고 따뜻한 친구와 함께하는 시간
</p>
</div>
</div>
</body>
</html>
#스타일 시트 복습2