작성자:
이 글은 Mozilla 웹 개발 팀의 Frederic Wenzel이 작성하였습니다.
text-shadow라는 CSS 프로퍼티는 이름이 말해 주듯이 텍스트 주변 부분에 그림자를 만들고 흐리게 해주는 기능을 제공합니다. text-shadow는 CSS2에서 처음 등장했으나 그 당시에 정확히 정의를 못했고 CSS 2.1에서 빠지게 되었습니다. CSS3에서 다시 등장한 이 기능은 현재 Firefox 3.5 기능 탑재가 완료되었습니다.
동작 방식
CSS 3 표준 스펙에 따르면 text-shadow 프로퍼티는 2가지 값을 가집니다.
none | [<shadow>, ] * <shadow>,
<shadow>는 다음과 같습니다.
[ <color>? <length> <length> <length>? | <length> <length> <length>? <color>? ],
여기서 첫 두 값은 수평 혹은 수직에서 텍스트와의 간격을 이야기하고 세번째는 얼마나 흐리게 할 것인가 하는 값(blur radius)를 말합니다. 가장 좋은 방법은 예제를 보는 것으니까 한번 살펴 보겠습니다.
text-shadow: 2px 2px 3px #000;
(앞으로 첫번째는 실제 코드 예제를 두번째 그림은 그것이 Firefox 3.5 맥버전에서 표시되는 것을 캡쳐한 것입니다.)
만약 그림자 배경을 좀 더 깔끔하게 하시려면 blur radius 값을 줄이면 됩니다.
text-shadow: 2px 2px 0 #888;
텍스트 Glowing 및 다중 그림자
현재 기능을 유연하게 적용하기 위해서 여러 가지 다른 것을 해보겠습니다. 텍스트와 그림자와의 간격 및 흐림 정도, 색상을 조정함으로서 다양한 효과를 만들어 낼 수 있습니다. But due to the flexibility of the feature, the fun does not stop here. By varying the text offset, blur radius, and of course the color, you can achieve various effects, a mysterious glow for example:
text-shadow: 1px 1px 5px #fff;
또는 간단한 그림자 효과입니다.
text-shadow: 0px 0px 5px #000;
이제 한 개 이상의 그림자를 만들어 보도록 하겠습니다. 이 기능은 css3.info의 http://www.css3.info/preview/text-shadow/에 소개된 것입니다.
text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200
text-shadow를 여러개 적용하는 것은 Firefox 3.5에서 가능하며 이론적으로 그 갯수는 무제한입니다. 물론 적당한 갯수를 사용하셔야만 하겠지요. 여타 CSS 프로퍼티 처럼 자바스크립트를 이용하여 이를 수정할 수 있습니다.
성능 및 접근성, 브라우저 호환성
많은 경우 플래시 파일 혹은 이미지 파일을 이용하여 그림자를 표시하는 것이 일반적입니다. 하지만 text-shadow를 써야할 2가지 이유가 있습니다.
The times of using pictures (or even worse, Flash) for text shadows on the web are numbered for two reasons:
먼저 이미지 파일 대신 text-shadow를 사용하면 HTTP 연결 수나 트래픽을 줄일 수 있으므로 성능이 향상 됩니다. 또한 스크린 리더 사용자나 검색 엔진들이 이미지가 아닌 텍스트로 정보를 얻을 수 있는 접근성이 향상 됩니다. 또한, 페이지 확대 기능을 통해 노인이나 어린이도 쉽게 글자를 파악할 수 있습니다. 이는 이미지로 된 경우 픽셀 확대에 따라 글자가 흐려지는 것을 방지할 수 있는 것입니다.
두번째는 향후 웹 브라우저 호환성 때문입니다.
- Opera는 text-shadow를 9.5 버전 부터 지원 합니다. Mozilla Developer Center에 의하면 Opera 9.x는 같은 요소에서 6개의 그림자를 지원합니다.
- Safari 역시 1.1 버전 부터 이 기능을 지원 하며 웹킷 기반 브라우저 모두 해당됩니다.
- Internet Explorer는 아직 text-shadow를 지원하지 않지만 텍스트를 보여 주는 데 있어서는 문제가 없습니다. 또한 text-shadow 기능이 MSIE에서 준비되고 있으며 Shadow 및 DropShadow” 필터기능과 함께 쓸 수 있습니다.
- 또한 MSIE 뿐만 아니라 Firefox 3 등 오래된 버전에서는 이 기능을 지원하진 않지만 텍스트를 표시하는 데는 문제가 없습니다.
그 다음으로 중요하게 생각할 점은 그리기 순서 입니다. Opera 9.x에서는 CSS2의 그리기 순서 (즉 맨 먼저 정의된 그림자를 맨 밑에 그린다.)를 따르는 반면 Firefox 3.5는 CSS3의 그리기 순서(먼저 정의된 그림자를 맨 위어 그린다.)를 따르고 있습니다. 다중 그림자를 그릴때는 이 점을 주의하세요.
맺으면서
text-shadow는 CSS의 강력한 기능을 보여 주는 예중에 하나입니다. Firefox 3.5 이후로 웹 개발 시 많은 부분에서 이용되기를 바랍니다. 또한 이는 오래된 브라우저에게 단계적 기능 축소(Graceful degradation) 역시 제공하기 때문입니다.
마지막으로 웹 개발자들이 이 기능을 많이 이용함으로서 글자로된 다양한 정보들이 더 많이 공유되기를 바랍니다.
참고 문헌
문서
- https://developer.mozilla.org/en/CSS/text-shadow
- http://www.quirksmode.org/css/textshadow.html
- http://www.w3.org/TR/css3-text/#text-shadow
예제
댓글이 없습니다.