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

 

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

 

css box-shadow

 

 

box-shadow는 말 그대로 그림자를 넣어주는 속성이다. 

 

 

적는 순서만 잘 기억해두면 활용도가 높으니 익혀보자.

 

 

box-shadow 속성 적는 방법

 

 

 

x축

오른쪽과 왼쪽에 그림자 효과가 적용된다.

양수일 경우 오른쪽 그림자 적용. 예) 5px ;

음수(-)일 경우 왼쪽 그림자 적용. 예) -5px ;

 

 

y축

위쪽과 아래쪽에 그림자 효과가 적용된다.

양수일 경우 아래쪽 적용. 예) 5px ;

음수일 경우 위쪽 적용. 예) -5px ;

 

 

blur

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

값이 작을수록 선명하게 보여진다.

값이 클수록 더욱 흐릿하게 보여진다.

예) 5px이 1px보다 더 흐릿하게 보여진다. 

 

 

spread

그림자의 크기를 조절해준다. 

양수면 그림자의 크기를 확장시켜주고, 

음수(-)면 그림자의 크기를 축소시켜준다. 

 

 

color

그림자에 색을 부여한다. 

 

 

 

번외로 color 뒤에 inset을 넣어주면 

그림자가 안쪽에 생긴다.

 

 

 

 

그러면 이제 속성 하나하나씩 적용된 모습을 아래 예제를 통해서 확인해보자.

 

 

실습1 : 오른쪽에 그림자 넣기 

 

box-shadow : 5px 0 0 0;

 

 

 

 

실습2 : 왼쪽에 그림자 넣기

 

box-shadow : -5px 0 0 0 ;

 

 

 

 

실습3 : 아래쪽에 그림자 넣기

 

box-shadow : 0 5px 0 0 ;

 

 

 

 

실습4 : 위쪽에 그림자 넣기

 

box-shadow: 0 -5px 0 0 ;

 

 

 

 

실습5 : 오른쪽 아래쪽 그림자 넣고 blur로 번짐효과 주기

 

box-shadow : 5px 5px 5px 0;

 

 

 

 

실습6 : 오른쪽 아래쪽 그림자 넣고 위 이미지보다 더 흐릿하게 blur 효과 주기

 

box-shadow : 5px 5px 10px 0;

 

 

 

 

실습7 : 실습6에 spread 확장효과 적용하기

 

box-shadow : 5px 5px 10px 5px;

 

 

 

 

실습8 : 실습6에서 spread 축소효과 적용하기

 

box-shadow : 5px 5px 10px -5px;

 

 

 

 

실습9 : 그림자를 빨간색으로 변경하자

 

box-shadow : 5px 5px 10px -5px red;

 

 

 

 

실습10 : 안쪽 그림자 넣어주기 

 

box-shadow : 5px 5px 10px -5px inset;

 

 

 

 

위 실습예제처럼 하나씩 효과를 적용해보면 금방 익힐 수 있다.