Web 디자이너가 사랑해 마지 않는 것 중의 하나는 "box-shadow (상자 그림자)" 라는 것이 있습니다.
Photoshop과 같은 특수한 소프트웨어를 사용하지 않더라도 코드만으로 그림자를 만들수 있다는 점에서, Web 디자이너들에게 사랑받는 코드라 할 수 있습니다.
box-shadow의 역사는 길고, 2005 년 시점에서 W3C 에서 box-shadow의 초안 이 발표되었습니다. 그림자의 길이와 각도, 색상이나 투명도까지 지정할 수 있기 때문에 이 기술이 등장한 초기에는 감동한 분도 많을 것입니다.
그러나 box-shadow를 사용한 그림자 떨어 방법은 등장부터 10년 이상이 경과했으며, 그 동안 브라우저가 다양한 속성을 새롭게 지원하기 시작했기 때문에, 이번 시간에는 새로운 시대의 css 그림자를 만드는 방법에 대해서 생각해보도록 하겠습니다.
그림자 떨구기계의 단골 box-shadow
box-shadow 속성은 상자에 하나 이상의 그림자를 넣을 때 사용하는 것으로, 이미지 처리 소프트웨어를 사용하여 슬라이스를 만들지 않아도 코드만으로 그림자를 떨어 뜨릴 수 있기 때문에 자주 활용됩니다.
우선 box-shadow 의 사용법을 복습하면, 이 속성은 예를 들어 다음과 같이 그림자를 지정합니다.
box-shadow: 5px 5px;
box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.6);
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.6) inset;
일반적으로 그림자는 2 ~ 4 줄의 코드로 정의되며, 선택적으로 색상과 inset 키워드를 추가 할 수 있습니다.
inset을 지정하면 상자의 외부가 아니라 내부로 그림자를 떨굴 수 있습니다. 길이 지정을 생략하면 0이 되며, 색상 지정은 생략하면 브라우저의 기본값이 됩니다.
자, 사각형은 OK! 그렇다면 다른 도형은?
box-shadow는 짧은 코드로 그림자를 생성 할 수 있기 때문에 편리하지만 몇 가지 예상치 못한 문제점도 있습니다.
예를 들어, SVG 의 등장으로 Web 환경에서 벡터 데이터의 사용도 점차 증가하고 왔는데요. 사각형이면 상자 요소와 딱 맞게 그림자가 생기지만, 원형이나 삼각형 등, 다른 모양일 경우에도 동일하게 네모 난 그림자가 붙어 버립니다.
"filter : drop-shadow ()" 로 만사 해결
그래서 등장하는 것이 filter : drop-shadow () 입니다. filter 속성의 drop-shadow ()는 W3C 가 권고 한 필터 효과 모듈 중 하나 언뜻 보면 box-shadow 속성과 비슷합니다.
그러나 실제로는 box-shadow와 drop-shadow ()는 주목할만한 차이가 있습니다. 우선 기본적인 사용법에 대해 알아 보겠습니다.
filter : drop-shadow () 의 지정은 기본적으로 box-shadow처럼 사용해 주면 OK입니다. 괄호 안에 지정하는 값은 box-shadow와 동일합니다.
예를 들어 다음과 같이 지정할 수 있습니다.
filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.6));
*** 그러나 inset 키워드는이 필터는 지정할 수 없다는 점을 명심 해 둘 필요가 있습니다.
이렇게 지정된 filter : drop-shadow () 는 PNG 이미지의 투명도와 SVG 도형에도 대응하고 있기 때문에 개체의 모양에 따라 그림자를 떨어 뜨릴 수 있습니다.
정리
이번에는 filter : drop-shadow () 을 소개했지만, CSS 필터는 Photoshop을 사용 않아도 실로 다양한 효과를 연출할 수 있습니다.
여러 필터를 조합하는 경우의 대부분은 필터의 순서가 문제되는 것은 아니지만, 기본적으로 필터는 CSS 라인 번호의 순서대로 적용되므로, 중간에 다른 필터를 덮어 버리는 것 도 있습니다. 또한 필터의 애니메이션을 지원하고 있습니다.
사실, 전자와 후자에서는 역할이 다릅니다. 하지만 적재 적소에 잘 다룰 수 있다면, 더 풍부한 표현을 연출할 수있을 것입니다. 그림자 만들기의 방법의 box-shadow 만이 아니라 filter : drop-shadow () 를 기억해두면 상황에 따라 사용할 수 있는 선택지가 늘어나게 되겠쭁?