box-shadow를 사용하여 그림자를 만들자

 

 

 

 

 

 

box-shadow를 사용하여

그림자를 만들자

 

 

 

 

 

 

 

만들어볼 화면

 

 

 

 

위와 같이 그림자를 넣는방법을

알아보도록 하겠습니다.

 

 

 

CSS 작업전 준비

 

 

이런식으로 css를 따로

분리시켜주시면 됩니다

 

카테고리에서 CSS를 보면

예전에 썼던 글중에

 

HTML문서에 .CSS Link하기

라고 썼던 기억이 있네요.

 

그리고 body에 간단하게

div를 하나 만든후에 class명은

test라고 써봤습니다

 

 

CSS 작성

 

 

그리고 저는 Brackets을 쓰기 때문에

Ctrl+E키를 눌러서 빠른편집을 열어보았습니다

(웹 - 알아두면 좋은 것에 Brackets에 대해

간단하게 쓴 글도 있습니다.)

 

그리고 아래와 같이 작성해보았습니다.

 

빠른편집이 안되시는 분들은 .css을 열어서 작성해주시면 됩니다.

 

box-shadow만

이제 보도록 하겠습니다.

 

 

 

box-shadow

 

box-shadow에서는

4~5가지 정도만 알아두면

사용하는데는 무리가 없습니다.

 

일단 위에서는 4가지를 적어놨습니다

box-shadow: 50px 50px 10px rgba(255, 0, 0, 0.3)

 

 

순서대로 보면

 

첫번째 속성은

h-shadow로 horizontal의 그림자를

넣어주는 부분입니다

 

위에 그림에서는 50px을 넣은 모습인데

만약 100px로 바꿔보면

 

이런식으로 위 화면보다

우측으로 50px 더 이동한 모습을 볼 수 있습니다

 

 

다음으로

두번째 속성은

v-shadow로 vertical의 그림자를

넣어주는 부분입니다.

 

다시 h-shadow를 50px로 바꾸고,

v-shadow만 100px로 바꿔보겠습니다.

 

box-shadow: 50px 100px 10px rgba(255, 0, 0, 0.3)

 

이렇게 바꿔보면

아래와 같이 아래쪽으로

50px 더 내려간 것을 확인 할 수 있습니다.

 

 

 

세번째 속성은

blur입니다.

 

blur는 흐릿흐릿하게

보이는 효과입니다

 

위 코드에서 blur를 아에 없애보겠습니다.

 

box-shadow: 50px 50px 0 rgba(255, 0, 0, 0.3)

 

이렇게 바꿔보면

아래와 같이 blur가 제거된

모습을 확인 할 수 있습니다.

 

 

 

 

네번째 속성은

color입니다.

 

따로 설명할 것 없이

색깔을 바꿔보도록 하겠습니다.

 

box-shadow: 50px 50px 0 black

 

위에서는 rgb값을 넣었었는데

이런식으로 색깔을 바로 넣어도 됩니다.

 

결과를 보면

 

이런식으로 그림자 색깔이 바뀐 것을

확인할 수 있습니다.

 

 

여기까지만 알면 사용하는데에는

문제가 없습니다.

 

 

마지막으로 inset라고 있는데

이건 바깥쪽이 아닌 안쪽에

그림자를 넣는 방법인데

 

저는 잘 쓰지 않지만

어떤식으로 나오는지만

확인하고 끝내도록 하겠습니다.

 

box-shadow: 3px 3px 2px black inset;

 

이렇게 쓰고 확인해보면

 

안쪽에 검은색으로

그림자가 생기는 것을

확인 할 수 있습니다.

 

아!

그리고 h,v-shadow 속성값으로

음수값도 역시나 가능합니다.

 

반대로 쪽으로 그림자가

생긴다고 보시면 됩니다.

 

box-shadow: -3px -3px 2px black inset;