[CSS] 그림자 효과 text-shadow의 사용 방법 | 여러개의 그림자 적용 | 안쪽으로 그림자 주기 - inset

 

 

 

👾 사용방법

text-shadow: 가로 세로 번짐정도 그림자색;

 

순서대로 (1)가로 그림자의 위치, (2)세로 그림자의 위치, (3)번짐 정도, (4)그림자 색상 이며, 가로와 세로 그림자의 위치는 필수로 지정해야 합니다.

 

여기서,

 

가로: 양수(+)면 오른쪽으로 그림자, 음수(-)면 왼쪽으로 그림자

세로: 양수(+)면 아래쪽으로 그림자, 음수(-)면  위쪽으로 그림자

 

가 생기게 됩니다.

 

<h2>에서 test-shadow의 세로 요소를 결정하는 픽셀을 0으로 잡아주니 위아래(세로) 그림자는 적용되지 않는 것도 확인할 수 있습니다.

 

 

또한 텍스트 내부로 그림자를 표시하고싶다면 다음과 같이 inset 키워드를 넣어주면 됩니다.

/* 텍스트의 내부로 그림자를 표시하도록 설정 */
text-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.5);

그림자의 흐림 정도도 rgba()에서 투명도 조절로 가능합니다.

 

/* 여러 그림자 효과 적용 */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), -1px -1px 2px rgba(255, 255, 255, 0.5);

쉼표로 구분하여 여러개의 그림자 효과를 줄 수도 있습니다.

 

/* 요소 그림자 적용 */
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

bos-shadow 속성으로 텍스트뿐만 아니라 다른 요소에도 마찬가지로 그림자 적용을 할 수 있습니다.