[CSS] 텍스트 외곽선 효과 주기, 텍스트 테두리 만들기

다음과 같은 글씨를 꾸미기 위해 노란색으로 텍스트를 둘러주려고 한다.

 

방법 1. -webkit-text-stroke 사용

  -webkit-text-stroke: 1px yellow;

-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: yellow;

다음과 같은 코드로 적용시킬 수 있다.

 

그러나 관련 문서를 보면 해당 방식으로 테두리를 주는 것이 표준이 아니며, IE에서는 지원이 되지 않는다고 한다.
또한 이 방식은 글자의 안쪽으로 테두리를 주는 방식이라 글자가 작으면 다음과 같이 보이는 특징이 있다.
(방법 2와 비교해보면 다르다)

Before

After

 

 

방법 2. text-shadow 사용

text-shadow: -1px 0px yellow, 0px 1px yellow, 1px 0px yellow, 0px -1px yellow;

다음과 같은 코드로 적용시킬 수 있다.

 

관련 문서

이 코드를 적용시킬 경우 방법 1과 다르게, 원래 글자의 바깥쪽으로 테두리를 주는 것을 알 수 있다. 

Before

After

 

그래서 다음과 같이 보이기도 한다