2024-10-10
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.photo {
position: absolute; /* 부모 요소에 속박되지 않고 객체로 취급되는 속성 */
left: 50px;
top: 20px;
}
.shadow {
position: absolute;
left: 450px;
top: 20px;
border-radius: 20px;
box-shadow: 20px 20px 10px 5px lightgray;
}
</style>
</head>
<body>
<!--
box-shadow 속성
- 그림자를 만드는 속성.
- 형식) box-shadow: <수평거리> <수직거리> <흐림정도> <번짐정도> <색상>
* 수평거리
- 그림자의 수평거리(얼마나 떨어져 있는지)
- 양수값은 오른쪽, 음수값은 왼쪽으로 그림자를 만듦.
* 수직거리
- 그림자의 수직거리(얼마나 떨어져 있는지)
- 양수값은 아래쪽, 음수값은 윗쪽으로 그림자를 만듦.
* 흐림정도
- 그림자의 흐림정도를 말함.
- 기본값은 해가 진 그림자를 표시.
값이 커질수록 부드러운 그림자를 표시함.
음수 값은 사용 불가함.
* 번짐정도
- 그림자가 번지는 정도를 말함.
- 양수 값은 그림자가 모든 방향으로 퍼짐.
음수 값은 그림자가 모든 방향으로 축소됨.
-->
<img src="images/img.jpg" alt="튤립이미지" class="photo">
<img src="images/img.jpg" alt="튤립이미지" class="shadow">
</body>
</html>
