css 텍스트 외곽선 처리하기, stroke

CSS를 사용하여 텍스트에 외곽선, stroke 효과를 주는 방법을 알아봅니다.

외곽선은 텍스트를 강조하는 효과적인 방법입니다. 간단하게 css를 사용하여 사용하는 것이 가능한데 가장 간단한 방법은 아래처럼 -webkit-text-stroke를 사용하는 방법입니다.

-webkit-text-stroke: 1px #000


다만, 이 방법은 매우 편리한 방법이지만 아쉽게도 표준 방법은 아니라 웹킷 및 모질라 계열의 브라우저에서만 적용됩니다. 사용할 경우 아래처럼 css에 적용하시기 바랍니다.
이제 텍스트에 외곽선이 선명하게 나타납니다.

그렇다면 또 다른 방법을 알아봅니다.

# -webkit-text-stroke 크로스 브라우징 방법

아래와 같은 방법을 사용하면 텍스트음영효과인 text-shadow를 이용하여 비슷한 효과를 만들 수 있습니다. 아래 코드를 봐주세요.


이 방법은 text-shadow가 적용되는 대부분의 브라우저에서 구현됩니다. 매우 효과적인 방법입니다.

# 실제 외곽선 적용된 예제보기

만약 아래와 같은 html에 위 css를 적용하여 외곽선을 직접 구현해보겠습니다.

위 코드의 실행결과는 아래와 같습니다.