[CODING] HTML/CSS 글자 테두리 적용하기(Apply text border) / text-shadow

웹에서 간단하게 글자에 테두리를 넣는 방법입니다. CSS에서 text-shadow 를 통해 그림자를 넣고, 그림자 색상을 지정하여 테두리처럼 보이도록 꾸밀 수 있습니다.

font.css

text-shadow: -1px 0 #F2F1F6, 0 1px #F2F1F6, 1px 0 #F2F1F6, 0 -1px #F2F1F6;
-moz-text-shadow: -1px 0 #F2F1F6, 0 1px #F2F1F6, 1px 0 #F2F1F6, 0 -1px #F2F1F6;
-webkit-text-shadow: -1px 0 #F2F1F6, 0 1px #F2F1F6, 1px 0 #F2F1F6, 0 -1px #F2F1F6;

위와 같은 방법으로 text-shadow, -moz-text-shadow, -webkit-text-shadow 를 적용하여 글자 테두리를 만들 수 있습니다. CSS를 사용하지 않고 style 태그로도 동일하게 나타낼 수 있습니다.

<html>
<body bgcolor=black>
<style>
.test_text {
text-shadow: -1px 0 #F2F1F6, 0 1px #F2F1F6, 1px 0 #F2F1F6, 0 -1px #F2F1F6;
-moz-text-shadow: -1px 0 #F2F1F6, 0 1px #F2F1F6, 1px 0 #F2F1F6, 0 -1px #F2F1F6;
-webkit-text-shadow: -1px 0 #F2F1F6, 0 1px #F2F1F6, 1px 0 #F2F1F6, 0 -1px #F2F1F6;
}
</style>
<div class="test_text">이 부분에 해당하는 글씨는 테두리 처리가 됩니다.</div>
</body></html>