![[2021/12/30]국비지원 CSS3 10-(1) 29일 과제](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FnSmJ2%2FbtrseRhre3C%2FAAAAAAAAAAAAAAAAAAAAAJzMXfOI0bqlBbX7puUc-6w9_lfUkKSxE8k9NZTOTBqo%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1761922799%26allow_ip%3D%26allow_referer%3D%26signature%3D%252B%252B8Sm4mwkGBapEj3kBXPqvaJUhk%253D)
폴라로이드 겹치기
주제 : transform, webfont
활용 : position, z-index
작업내용
<!DOCTYPE html>
<html lang="en">
<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>
<link href="https://fonts.googleapis.com/css2?family=Single+Day&display=swap" rel="stylesheet">
<style type="text/css">
body{font-size:20px;color: green;font-weight:bold;}
figure{margin:100px 100px 0 0;width: 300px; height: 199px; padding:10px 10px 50px;border: 1px solid #ddd;background:#fff;}
.t1{transform: rotate(-15deg) skew(15deg) translateY(10em);}
.t2{transform: rotate(15deg) translateY(-20em);}
.t3{transform: rotate(-45deg) scale(0.5) translate(65em,-27em);}
/* 제일 위 올라올 것에 position:relative;한 후에 z-index 순위 3 */
figcaption{text-align:center;margin: 10px;font-family: 'Single Day', cursive;}
</style>
</head>
<body>
<figure class=t1>
<img src="d7.jpg" alt="">
<figcaption>여름이 깊어가고 있었다</figcaption>
</figure>
<figure class="t2">
<img src="d7.jpg" alt="">
<figcaption>여름이 깊어가고 있었다</figcaption>
</figure>
<figure class="t3">
<img src="d7.jpg" alt="">
<figcaption>여름이 깊어가고 있었다</figcaption>
</figure>
</body>
</html>
결과물
