CSS_4강_1_box-shadow, opacity

열라뽕따히·2024년 3월 9일

CSS

목록 보기

16/20

box-shadow 속성

그림자를 만드는 속성

형식) box-shadow: <수평거리> <수직거리> <흐림정도> <번짐정도> <색상>

수평거리

그림자의 수평거리(얼마나 떨어져 있는지)
양수값은 오른쪽, 음수값은 왼쪽으로 그림자를 만듦

수직거리

그림자의 수직거리(얼마나 떨어져 있는지)
양수값은 아랫쪽, 음수값은 윗쪽으로 그림자를 만듦

흐림정도

그림자의 흐림 정도를 표현함
기본값은 해가 진 그림자를 표시
값이 커질수록 부드러운 그림자를 표시함
음수 값은 사용 불가

번짐정도

그림자가 번지는 정도를 나타냄
양수값은 그림자가 모든 방향으로 퍼짐
음수값은 그림자가 모든 방향으로 축소되어 보임

=============================코드=============================

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">

	.photo {
				position: absolute;    /* 절대값을 주는 것 */
				left: 50px;
				top: 20px;
	}
		
	.shadow {
				position: absolute;    /* 절대값을 주는 것 */
				left: 450px;
				top: 20px;
				
				border-radius: 50px;
				box-shadow: 20px 20px 10px 10px orange;
	}

</style>
</head>
<body>
	<img class="photo" alt="튤립 이미지"  src="images/img.jpg">
		
	<img class="shadow"  alt="튤립 이미지"  src="images/img.jpg">
</body>
</html>

=============================실행=============================

스타일 적용 전

스타일 적용 후

=============================코드=============================

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
		
		.photo {
				position: absolute;
				left: 50px;
				top: 100px;
				
				opacity: 0.25;    /* 투명도 속성 */
		}
		
		.photo:hover {
				opacity: 1;
		}
	
</style>
</head>
<body>
		<img class="photo" alt="튤립 이미지"  src="images/img.jpg">
</body>
</html>