[HTML/CSS] 텍스트에 그림자 효과 넣기 (text-shadow)

웹 문서의 텍스트에 그림자를 설정하면 텍스트를 더욱 강조시켜 눈에 띄게 만들 수 있습니다. 사이트 제목같이 강조를 해야 할 텍스트에 사용하면 좋은데요. text-shadow 속성은 텍스트에 그림자 효과를 추가하여 입체적으로 만들어 줍니다. 

 

 텍스트에 그림자 효과 넣기 (text-shadow) 

사용법

text-shadow: horizontality vertical blur color | none | initial | inherit

• horizontality : 그림자 수평 위치 (필수)
• vertical : 그림자 수직 위치 (필수)
• blur : 흐림 정도 (값을 정하지 않으면 0)
• color : 그림자 색 (값을 정하지 않으면 브라우저 기본값)
• none : 그림자 효과를 없앤다.
• initial : 기본값으로 설정한다.
• inherit : 부모 요소의 속성값을 상속받는다.

 

수직 그림자(horizontality)

See the Pen 텍스트에 그림자 넣기 by wjdxo513 (@wjdxo513) on CodePen.

 

horizontality는 텍스트부터 그림자까지의 수평(가로) 길이를 변경합니다. 양수 값은 글자 오른쪽, 음수 값은 글자 왼쪽에 그림자를 생성합니다. 필수값입니다.

 

 

수평 그림자(vertical)

See the Pen 텍스트에 그림자 넣기2 by wjdxo513 (@wjdxo513) on CodePen.

 

vertical 크기를 조절하면 그림자의 수직(세로) 위치를 변경할 수 있습니다. 양수값은 글자 아래쪽, 음수 값은 글자 위쪽에 그림자를 만듭니다. 필수값입니다.

 

 

그림자 흐림 정도

See the Pen 텍스트에 그림자 넣기3 by wjdxo513 (@wjdxo513) on CodePen.

 

blur의 크기를 조절하면 그림자가 번지는 정도를 바꿀 수 있습니다. 기본값은 0이며 큰 숫자를 넣으면 그림자가 모든 방향으로 퍼져 나가기 때문에 그림자가 크게 표시되고 그림자의 농도는 옅어집니다.

 

 

그림자 중첩하기

See the Pen Untitled by wjdxo513 (@wjdxo513) on CodePen.

 

그림자를 여러 개 중첩시켜 그래픽 효과처럼 만들 수도 있습니다. 위의 예제와 같이 그림자 값을 쉼표로 구분해서 나열하면 그림자가 중첩됩니다.