ENG
더 나은 웹개발을 꿈꾸는 기술 블로그. 웹이즈프리.
CSS의 box-shadow 스타일 속성을 사용하여 그림자 효과를 만들어보려고 합니다. 또 아래, 위, 좌, 우 한 방향으로만 그림자 효과를 적용하는 방법도 함께 알아봅니다.
# CSS 그림자 효과를 한 방향으로 만들기
그림자 효과를 만들기 위해서는 아래와 같이 세 가지 방법을 생각할 수 있습니다.
[ 하나 ] transparency 효과를 주기 위해서 png 파일을 적용하기
[ 둘 ] filter 스타일 속성의 drop-shadow 값을 적용하기
[ 셋 ] css의 box-shadow를 사용하기
여기서 오늘 알아볼 내용은 바로 box-shadow를 사용하는 방법입니다.
? 왜 box-shadow를 사용할까
이런 질문을 던질 수 있겠죠... 그 이유를 찾아보자면 filter의 경우 브라우저 호환성 부분에서 box-shadow보다는 좋은 선택이 아닙니다. 그리고 png 등의 이미지 파일을 적용하는 것은 static한 이미지가 추가로 필요하고 반응형이나 모바일 환경을 고려하기 위해서 여러개의 이미지가 필요할 수 있겠습니다. 이런 모든 것들을 고려한다면 box-shadow를 사용하는 것이 좋겠네요.
그럼 box-shadow를 한 번 사용해볼께요. 아래의 box는 다음의 스타일을 적용한 코드입니다.
@ box.html
<div class="box"></div>
@ box.css
.box {
width: 100px;
height: 100px;
border: 1px solid black;
box-shadow: 0 0 4px black;
}
width: 100px;
height: 100px;
border: 1px solid black;
box-shadow: 0 0 4px black;
}
위 코드를 적용해보니 아래와 같이 실행되는군요.
<div class="box-test"></div>
<style>
.box-test {
width: 100px;
height: 100px;
border: 1px solid black;
box-shadow: 0 0 4px black;
}
</style>
<style>
.box-test {
width: 100px;
height: 100px;
border: 1px solid black;
box-shadow: 0 0 4px black;
}
</style>
구현하려고했던 박스 주위의 shadow가 만들어졌습니다. 그런데 만약 아래에만 shadow를 만드려면? 이 경우 어떻게하면 될까요?
! box-shadow 한 방향에만 그림자 효과 적용하기
흠... 이때라도 생각할 수 있는 방법은 역시 png 파일을 적용하는 방법입니다. 그림자 이미지의 png를 원하는 방향에만 적용하면 해결할 수 있죠. 하지만 box-shadow를 사용할 수 있는 방법은 없을까요? 물론 가능합니다.
box-shadow: 좌우값 상하값 blur정도 그림자크기<option> 색;
box-shadow는 위와 같이 적용하죠? 여기서 네 번째 파라미터의 값은 그림자크기를 지정하는데 없어도 무방한 옵션값입니다. 이 값에 마이너스를 주면 어떻게 될까요?
@ 그림자 크기에 마이너스 값을 적용하기
그림자 크기로 마이너스값을 사용할 경우 box의 크기보다 작아지므로 보이지 않게 됩니다. 즉 안보이게 되겠죠. 이렇게 안보이는 경우 아래로 위치를 조정하면? 아래에만 그림자가 보이게될 것으로 예상할 수 있습니다. 바로 이 효과를 사용하여 안 보이도록 만들 수가 있겠습니다.
그럼 또 예제를 하나 만들어보죠. 아래 방향에만 보여줄 그림자 효과를 구현하려고 합니다. 코드는 아래와 같습니다.
@ box-bottom.html
<div class="box-bottom"></div>
@ box-bottom.css
.box-bottom {
width: 100px;
height: 100px;
border: 1px solid black;
box-shadow: 0 4px 4px -4px black;
}
width: 100px;
height: 100px;
border: 1px solid black;
box-shadow: 0 4px 4px -4px black;
}
이제 위 코드를 실행해보도록 하죠. 아래와 같이 나타나게 됩니다.
<div class="box-bottom"></div>
<style>
.box-bottom {
width: 100px;
height: 100px;
border: 1px solid black;
box-shadow: 0 4px 4px -4px black;
}
</style>
<style>
.box-bottom {
width: 100px;
height: 100px;
border: 1px solid black;
box-shadow: 0 4px 4px -4px black;
}
</style>
아래에만 그림자 효과가 적용된 것이 보이시나요? 드디어 원하는 목표를 달성하였습니다.
# 마치면서, 생각해 볼 부분
아마 중간에 알아채신 분들도 있지만 이 방법에는 한 가지 문제점이 있습니다. 알아채셨나요?
...
바로 그림자 효과의 크기가 살짝 작다는 부분입니다. 생각해보세요... 중간에 그림자 크기를 줄이고 이동했죠? 그렇기 때문에 아주 살짝 작게 나타나게 됩니다.
물론 큰 결점사항은 아니기에 그냥 넘어갈 수 있습니다. 다만 이런 부분이 거슬리다면 어떻게 할까요? 원래의 박스보다 살짝 더 큰 박스를 레이어로 띄어놓고 여기에 그림자 효과를 사용하는 방법이 있습니다. 물론 이 박스는 레이어 형태고 크기 이외의 다른 스타일은 없습니다. 오직 shadow를 위해서만 존재하죠.
@ 참고사항
추가로 더 큰 박스를 바로 만드는 것보다는 ::after 등의 가상 선택자(pseudo)를 사용한 뒤 그 안에 만드는 방법도 가능합니다. 개인적으로 이 방법을 선호하며 이렇게 적용을 많이 하는 편입니다.
여기까지 box-shadow를 사용하여 원하는 방향으로 그림자 효과를 구현하는 방법에 대하여 알아보았습니다.
[css] 스타일속성 gap을 flex에서 사용하기
