box-shadow 속성, 그림자 효과 부여하기

2017.08.01 14:53

이번 포스팅에서는 CSS3에서 추가된 box-shadow 속성에 대해서 알아보기로 할께요.

 

그동안 먹고 살기 바쁘다 보니 HTML 강좌도 계속 진행하지 못하고 중단된 상태로 있었네요. ㅠㅠ

 

프로그래밍으로 밥 벌어 먹고 사는 사람이 아니다 보니 강좌를 진행할 여유 시간을 내기가 쉽지 않더라고요.

 

그냥 저 혼자 공부하면서 노트에 혼자만 알아볼 정도로 대충 끄적거려 놓듯이 한다면 글 올리는 데 시간을 많이 잡아먹지 않겠지만 강좌 형태로 정리해서 올리려니 별거 아닌 내용이라도 시간을 꽤나 많이 잡아먹게 되더라고요.

 

이번 포스팅도 마찬가지네요. 내용은 진짜 별거 없이 간단한 데 정리해서 올리려니 일이 되어 버리네요. ㅎㅎ

 

이전 강좌에서 box-shadow 속성을 사용해서 그림자 효과를 적용한 글을 올렸더니 몇 몇 분께서 어떻게 한 거냐고 묻길래 이참에 이것도 정리할 겸 포스팅하게 되었습니다.

 

예전 같았으면 그림자 효과를 표현하기 위해서는 이미지 파일을 사용해야 되었는데요.

 

이제는 이미지를 사용하지 않고도 CSS3에서 새롭게 추가된 box-shadow 속성을 간단히 추가해줌으로써 HTML 엘리먼트에 그림자 효과를 사용할 수 있게 되었습니다.

 

사용법은 다음과 같습니다.

 

box-shadow:(오른쪽 방향) (아래쪽 방향) (흐림 효과) (그림자 색깔)

 

그럼 예제를 통해 적용해보도록 하겠습니다.

 

<div style="width:200px; height:30px; box-shadow:5px 5px 10px gray; border:1px solid red">예제 1</div>

예제 1

 

<div style="width:200px; height:30px; box-shadow:-5px 5px 10px gray; border:1px solid red">예제 2</div>

예제 2

 

<div style="width:200px; height:30px; box-shadow:-5px -5px 10px gray; border:1px solid red">예제 3</div>

예제 3

 

<div style="width:200px; height:30px; box-shadow:5px -5px 10px gray; border:1px solid red">예제 4</div>

예제 4

 

위의 4개의 예제를 통해 알 수 있듯이 그림자의 방향은 마이너스(-) 부호의 유무에 따라 달라지는 것을 알 수 있습니다.

신고
Posted by googlinfo(원래버핏)
이 댓글을 비밀 댓글로

티스토리 툴바