[CSS] 글자에 외곽선 넣기

Anna·2023년 7월 2일

웹킷(WebKit)을 이용해 간단히 글자에 외곽선을 넣을 수 있습니다. 단, 실제로는 글자 안쪽으로 선이 들어가기 때문에 글자 크기가 작은 경우 제대로 효과를 보지 못할 수 있습니다. 바깥쪽으로 외곽선을 두르고 싶은 경우에는 글자에 그림자를 추가하는 text-shadow를 이용할 수 있습니다.

웹킷으로 외곽선 만들기

웹킷을 이용하는 경우, 외곽선의 두께와 색만 설정할 수 있어 사용이 간편합니다.

-webkit-text-stroke-width

외곽선 두께 설정입니다. 픽셀, 포인트, em 등 길이값도 가능하고, thin / medium / thick의 키워드도 사용할 수 있습니다.

-webkit-text-stroke-width: thin;

-webkit-text-stroke-color

외곽선 색상 설정입니다. 색상값을 사용합니다.

-webkit-text-stroke-color: white;

-webkit-text-stroke

위의 두 설정의 축약입니다.

-webkit-text-stroke: 2px #333;

그림자로 외곽선 만들기

CSS의 text-shadow는 원래 그림자를 추가하기 위한 속성입니다. 다만, 여러개의 그림자를 동시에 설정할 수 있어, 여러 방향으로 그림자를 만들어 외곽선처럼 이용할 수 있습니다.

text-shadow

가로 세로 오프셋과 그림자의 색, 흐림 효과(blur)를 설정할 수 있습니다. 오프셋 값은 반드시 들어가야 하고, 나머지는 선택입니다.

쉼표로 여러개의 그림자를 구분해 넣을 수 있습니다. 여러번 text-shadow를 선언하는게 아니라, 한번에 여러개의 그림자를 설정한다는 점에 유의해주세요.

text-shadow: 1px 1px white;

text-shadow: -1px -1px white, 1px 1px white;

결과 비교

두께 1px의 외곽선을 넣고 싶을 때, 각 설정에 따라 결과가 어떻게 변하는지 비교해 보겠습니다. 다음 이미지의 각 줄은 ① 외곽선 설정 없음, ② 웹킷, ③ 2방향 그림자, ④ 4방향 그림자로 설정한 결과입니다.

상세는 다음과 같습니다.

(none)
-webkit-text-stroke: 1px #000;
text-shadow: 1px 1px #000, -1px -1px #000;
text-shadow: 1px 0px #000, 0px 1px #000, -1px 0px #000, 0px -1px #000;