#polaroid.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.shadow {
/*width를 사진과 동일한 500px;을 사용하고, padding으로 사진의 상하좌우의 동일한 여백을 줌*/
width: 500px;
padding: 10px;
border: 1px solid #bfbfbf;
/*box-shadow: (가로 길이) (세로 길이) (흐림효과) (확장) (색상);*/
box-shadow: 5px 5px 10px 10px darkgrey;
text-align: center;
/*rotate(회전효과) 15deg(15도)*/
transform: rotate(15deg);
/* <위치 이동하는 법 1>*/
/*margin: 0 auto;*/
/* <위치 이동하는 법 2>*/
position: relative;
top: 150px;
left: 200px;
}
.shadow>p {
color: fuchsia;
font-weight: bolder;
}
</style>
</head>
<body>
<h1>폴라로이드 느낌의 사진 만들기</h1>
<hr>
<div class="shadow">
<img src="img/cute.jpg" width="500px" ; height="450px" ;>
<p>졸귀-~-</p>
</div>
</body>
</html>
'CSS' 카테고리의 다른 글
| 문제 및 실습 (갤러리) (0) | 2020.10.15 |
|---|---|
| Brackets 기능 추가 (Emmet) (0) | 2020.10.15 |
| 문제 및 실습 (div(3)-GO GREEN) (0) | 2020.10.15 |
| 문제 및 실습 (div(2)) (0) | 2020.10.15 |
| 문제 및 실습 (div(1)) (0) | 2020.10.13 |