CSS text-shadow 속성
text-shadow 속성은 텍스트에 그림자를 추가한다.
가장 단순하게 사용할 때는 수평 그림자(2px)와 수직 그림자(2px)만 지정한다:
| <!DOCTYPE html> <html> <head> <style> h1 { text-shadow: 2px 2px; } </style> </head> <body> <h1>텍스트 그림자 효과!</h1> </body> </html> |
h1요소에 text-shadow를 수평 2px, 수직 2px를 설정하면 아래 그림과 같이 표시된다.
이제 text-shadow에 색깔을 설정해보자.
| <!DOCTYPE html> <html> <head> <style> h1 { text-shadow: 2px 2px red; } </style> </head> <body> <h1>텍스트 그림자 효과!</h1> </body> </html> |
h1 요소에 text-shadow를 수평 2px, 수직 2px 색을 red로 설정한 결과 화면이 아래 그림과 같다.
다음으로 그림자에 블러 효과를 5px 설정해보자
| <!DOCTYPE html> <html> <head> <style> h1 { text-shadow: 2px 2px 5px red; } </style> </head> <body> <h1>텍스트 그림자 효과!</h1> </body> </html> |
h1 요소에 text-shadow를 수평 2px, 수직 2px 블러효과를 5px 그리고 색을 red로 설정한 결과 화면이 아래 그림과 같다.
텍스트 그림자 효과 예제1
| <!DOCTYPE html> <html> <head> <style> h1 { color: white; text-shadow: 2px 2px 4px #000000; } </style> </head> <body> <h1>텍스트 그림자 효과!</h1> </body> </html> |
h1 요소에 text-shadow를 수평 2px 수직 2px 블러효과 4px 그리고 색상을 #000000(검정색)을 설정한 결과 화면은 아래 그림과 같다.
빨간색 네온 빛이 있는 텍스트 그림자 예제
| <!DOCTYPE html> <html> <head> <style> h1 { text-shadow: 0 0 3px #FF0000; } </style> </head> <body> <h1>빨간색 네온 빛이 있는 텍스트 그림자!</h1> </body> </html> |
h1 요소에 text-shadow를 수평 0px 수직 0px 블러효과 3px 그리고 색상을 #FF0000(빨강색)을 설정한 결과 화면은 아래 그림과 같다.
빨간색, 파란색 네온 빛 텍스트 그림자
| <!DOCTYPE html> <html> <head> <style> h1 { text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF; } </style> </head> <body> <h1>빨간색 및 파란색 네온 빛이 있는 텍스트 그림자!</h1> </body> </html> |
h1 요소에 text-shadow를 수평 0px 수직 0px 블러효과 3px 그리고 색상을 #FF0000(빨강색)을 설정하고, 수평 0px 수직 0px 블러효과 5px 그리고 색상을 #0000FF(파랑색)을 설정한 결과 화면은 아래 그림과 같다.
검정색, 파랑색 짙은파랑색 네온 빛 텍스트 그림자
| <!DOCTYPE html> <html> <head> <style> h1 { color: white; text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue; } </style> </head> <body> <h1>텍스트 그림자 효과!</h1> </body> </html> |
h1 요소에 text-shadow를 수평 1px 수직 1px 블러효과 2px 그리고 색상을 검정색을 설정하고, 수평 0px 수직 0px 블러효과 25px 그리고 색상을 파랑색을 설정하고, 수평 0px 수직 0px 블러효과 5px 그리고 색상을 짙은파랑색을 설정하고 결과 화면은 아래 그림과 같다.
지금까지 CSS 텍스트 그림자에 다양한 효과를 설정하는 text-shadow 속성의 개념과 실습을 하였다.
꼭 손으로 머리로, 눈으로 실습하기를 추천합니다.
모두 화이팅입니다.!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > CSS문법' 카테고리의 다른 글
| CSS 웹 안전 폰트 (0) | 2023.08.04 |
|---|---|
| CSS font-family (0) | 2023.08.03 |
| CSS text-transform 속성 (0) | 2023.08.01 |
| CSS text spacing (0) | 2023.07.31 |
| CSS text-decoration 속성 (0) | 2023.07.30 |
댓글