CSS3 Box Shadow 그림자 효과 추가하는 방법

CSS3의 box-shadow 속성을 사용하면 웹사이트 요소에 그림자 효과를 추가할 수 있습니다.

.

box-shadow 속성의 값은 h-shadow, v-shadow, blur, spread, color, inset 이루어져 있습니다.

h-shadow 는 그림자의 수평거리를 의미합니다. 음수, 양수 모두 가능합니다.

v-shadow 는 그림자의 수직거리를 의미합니다. 음수, 양수 모두 가능합니다.

blur 는 그림자 경계의 흐름 정도를 의미합니다.

spread 는 그림자의 확장거리를 의미합니다. 음수 양수 모두 가능합니다.

color 는 그림자의 색상을 의미합니다.

inset 는 내부그림자 적용 여부를 의미합니다.

.

가장 기본이 되는 그림자 효과를 적용해 보겠습니다.

box-shadow의 값으로 5px 5px 10px #777 을 설정했습니다.

<div style="width: 50px; height: 100px; background-color: green; margin: 20px; box-shadow: 5px 5px 10px #777"></div>

.

처음 두개의 값 5px은 h-shadow와 v-shadow이며, blur의 값은 10px이고 그림자의 색상은 #777이 됩니다.

.

다음으로 spread 값과 함께 사용해 보겠습니다.

box-shadow의 값으로 5px 5px 10px 8px #777 을 설정했습니다.

<div style="width: 50px; height: 100px; background-color: green; margin: 20px; box-shadow: 5px 5px 10px 8px #777"></div>

.

처음 두개의 값 5px은 h-shadow와 v-shadow 값 이며, 다음 두개의 값 10px 와 8px은 순서대로 blur 값과 spread 값입니다. 그리고 그림자의 색상은 #777이 됩니다.

.

다음으로 웹사이트 요소 내부에 그림자 효과를 넣어보겠습니다.

box-shadow 속성의 값으로 inset 0px 0px 10px #eee을 설정했습니다.

.

<div style="width: 50px; height: 100px; background-color: green; margin: 20px; box-shadow: inset 0px 0px 10px #eee"></div>

.

웹사이트 요소 내부에 그림자 효과를 넣을 때는 inset 값을 사용하며, 그 다음으로 두개의 0px 의 값은 h-shadow 값과 v-shadow 값이며 blur의 값은 10px 그림자 색상은 #eee 입니다.

.

또한, spread 값을 음수로 지정해서 다음과 같은 그림자 효과를 넣어줄 수 있습니다.

box-shadow 속성 값으로 0px 12px 6px -6px #777 을 설정했습니다.

.

<div style="width: 50px; height: 100px; background-color: green; margin: 20px; box-shadow: 0px 12px 6px -6px #777"></div>

.

출처: https://caniuse.com/css-boxshadow

.

이렇게 box-shadow 속성을 사용해서 그림자 효과를 추가하는 방법에 대해서 알아봤습니다.

감사합니다. 🙂