Erzsamatory Weblog


사용자 삽입 이미지


최근들어 인터넷을 돌아다니다보면 HTML로 만들어진 객체에 그림자가 적용되어 있는 것을 매우 쉽게 볼 수 있을 것입니다. 특히 반응형 사이트에서 이러한 것을 쉽게 볼 수 있습니다. 이 블로그를 예로 들자면, 모바일 환경에서 사이드바를 요청하는 경우 그림자가 적용된 박스가 나타납니다. HTML에 포함되어 있는 그림자는 어떻게 만들어진 것일까요? 그림자를 만드는 방법으로는 여러가지가 있겠지만 가장 쉽게 생각할 수 있는 것으로는 포토샵을 이용한 직접적인 편집이 있겠죠. 하지만 포토샵을 이용하여 만들어진 그림자는 픽셀로 구성된다는 고질적인 한계점이 있습니다. 따라서 이 글에서는 그림자를 만들 때 포토샵이 아닌 CSS만을 이용하여 만드는 방법에 대해서 소개하겠습니다. CSS는 벡터 방식으로 그림자를 만듭니다.


CSS3의 그림자 속성


최근 CSS3 라는 새로운 버전의 CSS가 발표되었습니다. CSS3 에서는 새롭게 지원되는 기능이 많이 있는데, 이 글에서 설명할 그림자 생성 기능이 그 중 하나입니다. 이전의 CSS에서는 HTML 요소에 그림자를 생성할 수 없었습니다. 따라서 그림자를 만들고 싶다면 어쩔 수 없이 포토샵을 이용하여 만들어야 했습니다. 하지만 포토샵을 이용하면 그림자가 픽셀로 구성되기 때문에 확대를 하는 경우 그림자가 깨져 보이는 현상이 일어났습니다. 하지만 이번에 새로 발표된 CSS3의 그림자 생성 기능을 이용하면 웹브라우저에서 벡터 방식으로 그림자가 만들어지기 때문에 확대를 해도 그림자가 깨져 보이지 않습니다. 바로 이러한 점 때문에 CSS3를 이용하여 그림자를 만드는 방법이 점점 인기를 얻고 있는 추세입니다.

하지만 CSS는 HTML, 자바스크립트와 함께 웹브라우저에서 지원하는 스크립트 언어 중 하나입니다. 방문자의 컴퓨터에서 실행되어 해석이 되는 것이기 때문에 방문자 컴퓨터의 영향을 크게 받는 스크립트 언어라고 할 수 있습니다. CSS3는 최근에 발표된 새로운 표준이기 때문에 구 버전의 웹브라우저에서는 그림자 속성을 인식하지 못 할 수도 있습니다. 특히 인터넷 익스플로러 9 미만 버전의 웹브라우저에서는 CSS3의 그림자 기능을 이용할 수 없습니다.


CSS3의 box-shadow 속성


CSS3에서 그림자를 지정할 때 사용하는 속성은 box-shadow 입니다. CSS의 단 한 가지 속성만으로 그림자를 만들 수 있다니 정말 편리하지 않습니까? CSS3의 발전으로 인하여 개발자는 포토샵과 같은 이미지 편집 프로그램 없이도 매우 쉽게 사이트 디자인을 할 수 있게 되었습니다. box-shadow 속성의 사용 방법은 다음과 같습니다.

box-shadow { 그림자 수평 이동, 그림자 수직 이동, 그림자 퍼짐 정도, 그림자 범위 정도, 그림자 색상 }

CSS3를 지원하지 않는 웹브라우저가 웹킷(webkit) 엔진을 기반으로 하는 경우 다음과 같은 방법으로 그림자를 생성할 수 있습니다. 웹킷 엔진을 사용하는 웹브라우저는 구글 크롬과 애플의 사파리입니다. 하지만 구글 크롬과 사파리 웹브라우저는 자동으로 최신 버전으로 업그레이드되는 기능이 기본적으로 포함되어 있기 때문에 아래 속성을 사용하는 것이 꼭 필요한 것은 아닙니다. 그렇다하더라도 만약의 상황을 대비하는 것이 나쁜 것만은 아니니 CSS를 이용하여 그림자를 생성할 때 아래 속성을 추가해주는 것이 좋습니다.

-webkit-box-shadow { 그림자 수평 이동, 그림자 수직 이동, 그림자 퍼짐 정도, 그림자 범위 정도, 그림자 색상 }

웹킷 엔진말고도 웹브라우저에는 다양한 엔진이 있습니다. 만약 모질라 엔진을 사용하는 구 버전의 웹브라우저를 사용하고 있는 방문자를 위하여 다음 속성을 추가할 수도 있습니다. 모질라 엔진을 사용하는 대표적인 웹브라우저로는 파이어폭스가 있습니다. 구 버전의 파이어폭스에서는 box-shadow 속성을 인식하지 못 하므로, 구 버전의 파이어폭스를 위하여 아래의 속성을 추가하는 것이 좋습니다.

-moz-box-shadow { 그림자 수평 이동, 그림자 수직 이동, 그림자 퍼짐 정도, 그림자 범위 정도, 그림자 색상 }

그림자 수평 이동: 그림자가 수평으로 어떻게 이동되는지 설정합니다. + 값은 오른쪽으로, - 값은 왼쪽으로 이동합니다.
그림자 수직 이동: 그림자가 수직으로 어떻게 이동되는지 설정합니다. + 값은 아래쪽으로, - 값은 위쪽으로 이동합니다.
그림자 퍼짐 정도: 그림자가 얼마나 퍼지는지 설정합니다. 숫자가 커질수록 그림자의 범위가 넓어지는 대신 흐려집니다.
그림자 범위 정도: 그림자의 범위를 설정합니다. 숫자가 커질수록 그림자가 나타나는 범위가 넓어집니다. 범위가 넓어지지만 그림자가 흐려지지는 않습니다.
그림자 색상: 그림자의 색상을 설정합니다. HEX코드 또는 RGBA로 색상을 지정할 수 있습니다.

box-shadow 속성 활용 예제


box-shadow 속성이 실제로 어떻게 사용되는지 예제를 통하여 알아보도록 하겠습니다. 이 글에서 소개하는 box-shadow 속성 예제는 모두 이 블로그에서 실제로 사용되거나 사용되고 있는 소스입니다. 이 블로그에서 사용된 것이기 때문에 해당 소스는 검증되었다고 봐도 무방하므로, 원한다면 본인의 블로그에 그대로 사용해도 됩니다.


1. 떠 있는 레이어를 강조할 때


일반적으로 대부분의 블로그에서는 떠 있는 레이어를 우측 하단의 위로가기 버튼에 활용하고 있습니다. 본문의 내용이 매우 많은 경우 방문자가 직접 화면 상단까지 스크롤하는 것은 큰 불편함이기 때문에, 특히 스마트폰에서는 더욱 불편하기 때문에, 블로그 관리자는 방문자의 편의를 위하여 우측 하단에 위로가기 버튼을 만드는 것이 일반적입니다. 다음 예제는 우측 하단에 떠 있는 레이어를 만드는 경우 사용될 수 있는 CSS 소스코드입니다. 웹브라우저 화면에 고정되는 레이어를 만드는 방법에 대해서는 [2014/7/19 누구나 할 수 있는 CSS를 이용하여 고정 레이어 만드는 방법] 글을 참고하시기 바랍니다.

.layer_fixed {
    -webkit-box-shadow: 0 0 5px 1px #6B6B6B;
    -moz-box-shadow: 0 0 5px 1px #6B6B6B;
    box-shadow: 0 0 5px 1px #6B6B6B;
    position: fixed;
    bottom: 0px;
    right: 0px;
}


position 속성을 fixed로 설정하여 웹브라우저 화면에 고정될 수 있도록 하였으며, bottom 속성과 right 속성을 모두 0px로 설정하여 우측 하단에 레이어가 위치하도록 하였습니다. 위와 같이 CSS 속성을 정의한 후, 위로가기 버튼이 삽입된 이미지 또는 DIV 태그에 해당 스타일 클래스를 적용시키면 우측 하단에 위로가기 버튼이 고정됨과 동시에 그림자가 생성됩니다. 이렇게 화면에 떠 있는 레이어를 강조할 때에는 그림자 좌우측 좌표를 모두 0으로 설정하는 것이 가장 자연스럽습니다.


2. 팝업 레이어


팝업 레이어는 반응형 사이트에서 자주 사용되고 있는 사용자 인터페이스입니다. 웹브라우저의 새로운 창을 생성할 필요 없이 레이어에 모든 콘텐츠를 출력하기 때문에 방문자는 더욱 빠르게 사이트의 내용을 확인할 수 있습니다. 특히 팝업 레이어는 로그인 창에 자주 활용되고 있습니다. 팝업 레이어가 적용된 로그인 양식은 블로그 마케팅 사이트인 프레스블로그에서 제대로 활용하고 있으므로, 한 번 확인해보시기 바랍니다. 다음 소스는 방문자가 팝업 레이어가 나타났다는 사실을 쉽게 인지할 수 있도록 적당하게 그림자를 만들어주는 CSS 예제입니다.

.popup_window {
    -webkit-box-shadow: 2px 3px 5px 1px rgba(0,0,0,0.3);
    -moz-box-shadow: 2px 3px 5px 1px rgba(0,0,0,0.3);
    box-shadow: 2px 3px 5px 1px rgba(0,0,0,0.3);
    position: absolute;
    top: 100px;
    left: 300px;
}


position 속성을 absolute로 설정했기 때문에 웹브라우저 화면에 고정되는 것은 아니고, 위 소스에서는 top 속성과 left 속성에 따라 지정된 위치에 고정됩니다. 웹브라우저 화면이 아닌 웹페이지를 기준으로 하기 때문에 스크롤바를 내려도 팝업 레이어의 위치를 그대로 유지됩니다. 위와 같이 스타일 속성을 정의한 후 팝업 레이어로 표시할 DIV 태그에 해당 스타일 클래스를 적용시키면 자연스럽게 그림자가 표시된 팝업 창을 확인할 수 있습니다. 여기에서는 그림자 색상을 설정할 때 RGBA 방식을 사용하였으며, 불투명도는 0.3으로 설정했습니다. RGBA 방식으로 색상을 설정할 때의 가장 큰 장점은 불투명도를 설정할 수 있다는 것입니다. 하지만 인터넷익스플로러 9 미만의 버전에서는 RGBA 방식의 색상 설정을 할 수 없으므로 주의하시기 바랍니다.


마무리


지금까지 CSS를 이용하여 그림자를 만드는 방법에 대해서 알아보았습니다. CSS3가 등장하기 이전에는 인터넷익스플로러의 플러그인을 이용하거나 포토샵을 이용하여 그림자를 만들었다면, 이제부터는 CSS3를 이용하여 매우 쉽게 그림자를 만들 수 있게 되었습니다. 하지만 무조건 CSS3를 이용하여 그림자를 만드는 것이 좋은 것만은 아닙니다. 왜냐하면 이 속성은 구형 웹브라우저에서는 지원하지 않기 때문입니다.

따라서 완벽한 크로스브라우징을 원한다면 CSS3를 이용한 그림자보다는 포토샵을 이용하여 직접 수정하는 것이 좋을 것입니다. 또한 -webkit- 또는 -moz- 접미사를 추가하여 구형 웹브라우저를 지원할 수도 있습니다. 하지만 무슨 방법을 쓰더라도 구형 인터넷익스플로러에서는 CSS3의 그림자 속성을 사용할 수가 없습니다. 그래도 다행인 점은 최근들어 방문자의 웹브라우저의 버전이 점점 높아지고 있는 추세이기 때문에 가까운 미래를 생각한다면 CSS3를 이용하여 그림자를 만드는 것이 훨씬 더 효율적이라고 할 수 있겠습니다.
http://www.erzsamatory.net/trackback/30

건전한 댓글 문화를 만들어주시기 바랍니다 ^^
불건전한 댓글이 등록되는 경우 관리자의 임의적 판단으로 삭제될 수 있음을 미리 공지드립니다.

비밀글로 작성하기