티스토리 뷰

💕IT 공부하기/CSS3

[CSS3] text-shadow, box-shadow 글자와 박스에 그림자 생성하기

수리즘 2023. 4. 17. 17:19

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