[ 코딩 ] css 글자에 그림자 적용하기 : text-shadow

 

[ 코딩 ] css 글자 그림자 속성 text-shadow

 

text-shadow 속성

 

 

text-shadow는 이름 그대로 글자에 그림자효과를 적용시켜준다.

 

 

속성을 적는 순서만 기억하면 쉽게 그림자를 넣을 수 있다. 

 

 

text-shadow 속성 적는 순서

 

 

 

 x축 

오른쪽과 왼쪽에 그림자 효과를 적용해준다. 

오른쪽은 양수 ex) 3px ;
왼쪽은 음수 ex) -3px ;

 

 

 y축 

아래쪽과 위쪽에 그림자 효과를 적용시켜준다.

아래쪽은 양수 ex) 3px;

위쪽은 음수 ex) -3px;

 

 

 blur 

그림자에 번짐효과를 준다.

크기가 커질수록 더 흐릿하게 번짐효과가 적용된다.

 

 

 color 

그림자에 색을 부여한다.

 

 

 

 

아래 예제를 통해서 어떻게 적용되는지 하나씩 알아보자. 

 

 

 

 

 

 

우선 위와 같이 h1 태그에 너비(width)와 height(높이)를 주고

글자를 가운데(text-align & line-height) 위치시키고

글자색(color)을 회색으로 적용시켰다. 

 

 

이렇게 준비를 끝내고 

text-shadow의 값만 바꿔보도록 하겠다. 

 

 

 

 

 

 

실습1 : 글자 오른쪽에 검정색 그림자 넣기.

 

text-shadow : 5px 0 0 black;

 

 

 

실습2 : 글자 왼쪽에 검정색 그림자 넣기.

 

text-shadow : -5px 0 0 black;

 

 

 

 

실습3 : 글자 아래쪽에 검정색 그림자 넣기.

 

text-shadow : 0 5px 0 black;

 

 

 

 

실습4 : 글자 위쪽에 검정색 그림자 넣기.

 

text-align : 0 -5px 0 black;

 

 

 

 

실습5 : 오른쪽과 아래쪽에 검정색 그림자 넣고, blur 번짐효과 넣기.

 

text-align : 3px 3px 3px black;

 

 

 

 

실습6 : 실습5에서 더 흐릿하게 번짐효과 적용하기.

 

text-align : 3px 3px 6px black;

 

 

 

 

text-shadow 와 box-shadow는 거의 비슷하기 때문에 

같이 공부해서 익히면 좋다. 

 

 

 

아래 box-shadow 포스팅을 참고해보자. 

 

https://comizle.tistory.com/41