티스토리 뷰

[개발]프로그래밍/css3

[css3] text-shadow - 텍스트에 그림자 효과

좋은 블로그 2021. 3. 31. 11:44
1. 개념
text-shadow - 텍스트에 그림자 효과
text-shadow는 텍스트에 그림자 효과를 주는 속성

속성

설명

none

그림자 효과를 사용하지 않음

가로 거리

텍스트부터 그림자까지의 가로 거리
(양수 : 글자 오른쪽 , 음수 : 글자 왼쪽)

세로 거리

텍스트부터 그림자까지의 세로 거리
(양수 : 글자 아래쪽 , 음수 : 글자 위쪽)

번짐 정도

그림자가 번지는 정도
(양수 : 크게 표시 , 음수 : 축소되어 표시)

그림자 색상

한 가지만 지정할 수도 있고
공백으로 구분해 여러 색상을 지정(기본값:글자 색)
2. 태그
text-shadow
html5 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<! DOCTYPE html>
<html lang = "kr" >
<head>
<meta charset = "utf-8" >
<title> 키보드와 하루 </title>
<style>
div
{
margin-top : 20px ;
}
</style>
</head>
<body>
1
<div style =' color : red ; text-shadow : 3px 3px ;' >
키보드와 하루
</div>
2
<div style =' color : blue ; text-shadow : 5px 5px 3px red ;' >
키보드와 하루
</div>
3
<div style =' color : green ; text-shadow : 5px -5px 3px orange ;' >
키보드와 하루
</div>
4
<div style =' text-shadow : 0 0 3px orange , 0 5px 3px yellow , 0 10px 3px red ;' >
키보드와 하루
</div>
</body>
</html>
결과 화면
코드 설명
1
text-shadow : 3px 3px ;
글자색을 빨간색으로 설정한 후에 text-shadow를 가로 거리 3px , 세로 거리 3px 주었습니다.
따로 그림자 색을 지정하지 않아서 글자색을 따라가고 1번 결과에서처럼 그림자가 생기는 것을 확인하실 수 있습니다.
2
text-shadow : 5px 5px 3px red ;
글자색은 파란색 그림자 효과는 5px 거리고 3px의 번짐효과를 빨간색으로 주었습니다.
번짐 효과를 주었을 때 1번에서보다 확실히 그림자가 더 크게 보이는 것을 확인하실 수 있습니다.
3
text-shadow : 5px -5px 3px orange ;
세로의 길이가 음수일 경우에는 아래가 아닌 위로 그림자 효과를 주게 됩니다.
4
text-shadow : 0 0 3px orange,0 5px 3px yellow,0 10px 3px red ;
그림자 효과를 하나의 색으로만 줄 수 있는 것이 아니라 위에서처럼 여러 거리에 그림자 효과를 줄 수 있습니다.
저작자표시

'[개발]프로그래밍 > css3' 카테고리의 다른 글

[css3] letter-spacing,word-spacing - 텍스트 간격 조절  (0) 2021.04.02
[css3] white-space - 공백 처리  (0) 2021.04.01
[css3] text-transform - 텍스트 대·소문자 변환  (0) 2021.03.30
[css3] text-decoration - 텍스트에 줄 표시  (0) 2021.03.29
[css3] color - 글자 색 지정  (0) 2021.03.26
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday