text-shadow와 box-shadow를 이용하여 요소에 그림자를 추가해 주는 기능입니다.
포토샵에서의 drop-shadow와 비슷한 기능이라고 이해하면 될 것 같습니다.
(1) text-shadow : 텍스트에 그림자 추가하기
text-shadow : 가로축거리 세로축거리 퍼짐도 색상;
다음의 예제를 통해 text-shadow의 사용법을 알아보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>text-shadow</title>
<style>
span {
font:bold 150px/1.6 verdana;
color: dodgerblue;
margin: 50px;
}
span:nth-child(1) { text-shadow: 5px 5px 5px #333;}
span:nth-child(2) { text-shadow: -5px -5px 10px #333;}
</style>
</head>
<body>
<span>TEST1</span>
<span>TEST2</span>
</body>
</html>2개의 <span> 태그를 이용하여 텍스트를 입력합니다. <span> 태그에 공통으로 글자의 모양을 설정해 준 뒤, nth-child를 이용하여 text-shadow에 각기 다른 속성 값을 입력합니다. 첫 번째 <span> 태그에는 그림자의 가로축과 세로축 거리를 플러스 값으로, 두 번째 <span> 태그에는 마이너스 값으로 설정한 뒤, 퍼짐도 의 수치를 2배 정도 증가시킵니다.
첫 번째 <span> 태그는 그림자의 가로축과 세로축의 값을 플러스로 설정하였기에 그림자의 방향이 오른쪽, 아래쪽으로 이동하였으며, 두 번째 <span> 태그는 마이너스 값으로 설정하여 그림자의 방향이 왼쪽, 위쪽으로 이동하였습니다. 또한 그림자의 퍼짐도가 첫 번째에 비해 좀 더 뿌옇게 퍼진 것을 확인할 수 있습니다.
(2) box-shadow : 블록 요소에 그림자 추가하기
box-shadow : 가로축거리 세로축거리 퍼짐도 색상;
다음의 예제를 통해 box-shadow의 사용법을 알아보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>box-shadow</title>
<style>
div {
width: 500px;
height: 300px;
float: left;
margin: 50px;
background-color: pink;
}
div:nth-child(1) { box-shadow: 10px 10px 10px #333;}
div:nth-child(2) { box-shadow: -10px -10px 20px #333;}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>블록 요소인 2개의 <div> 태그를 생성합니다. <div> 태그에 공통으로 넓이와 높이 값을 주고 배경색과 여백도 추가합니다. 마찬가지로 nth-child를 이용하여 각각의 <div>에 box-shadow의 속성을 달리 적용합니다.
위와 같이 text-shadow와 box-shadow의 사용 방법은 동일합니다. 단지 text-shadow는 인라인 요소인 텍스트에 그림자를 주는 것이고, box-shadow는 블록 요소의 태그에 그림자를 주는 것의 차이입니다.
'💕IT 공부하기 > CSS3' 카테고리의 다른 글
| [CSS3] background-size : 배경 이미지의 크기 조절하기 (0) | 2023.04.24 |
|---|---|
| [CSS3] gradient : 배경에 그라디언트 색상과 모양 지정하기 (0) | 2023.04.19 |
| [CSS3] border-radius : 사각형의 모서리를 둥글게 하기 (0) | 2023.04.19 |
| [CSS3] CSS가상 선택자 정리 및 비교 (first-child, last-child, nth-child, nth-of-type, ) (0) | 2023.04.12 |
| [CSS3] nth-child():원하는 순서 값에 해당하는 태그를 선택하는 CSS선택자 (0) | 2023.04.11 |