🖍️ CSS 텍스트 외곽선
유튜브 자막처럼 또렷한 외곽선 글자의 CSS 코드를 실시간으로 만들어 드립니다.
사용 방법
- 외곽선을 입힐 문구를 입력합니다.
- 외곽선 두께·색과 글자 안쪽 색을 정합니다.
- 미리보기로 확인하고 'CSS 복사'를 누릅니다.
이럴 때 유용해요
- 영상 썸네일·자막처럼 어떤 배경에서도 읽히는 글자가 필요할 때
- 이벤트 배너의 임팩트 있는 타이틀을 만들 때
- 포스터 느낌의 아웃라인 타이포그래피를 실험할 때
알아두면 좋은 팁
- 코드에 포함된 paint-order: stroke fill 이 핵심입니다. 이게 없으면 외곽선이 글자 안쪽을 파고들어 얇은 글꼴이 뭉개집니다.
- 외곽선 두께는 글자 크기의 5~8% 정도가 자연스럽습니다. 48px 글자면 3~4px이 적당합니다.
- 굵은(700 이상) 글꼴일수록 외곽선 효과가 깔끔합니다. 얇은 글꼴에 두꺼운 외곽선을 두르면 획이 붙어버립니다.
자주 묻는 질문
-webkit- 접두사인데 파이어폭스에서도 되나요?
네. 이름과 달리 파이어폭스(49+)와 모든 최신 브라우저가 -webkit-text-stroke를 지원합니다. 표준화 전에 관례로 굳어진 속성이라 접두사가 남아 있을 뿐입니다.
외곽선이 글자를 갉아먹는 것처럼 보여요.
text-stroke는 기본적으로 획의 중심선 기준으로 안팎 양쪽에 그려지기 때문입니다. paint-order: stroke fill을 지정하면 외곽선을 먼저 칠하고 그 위에 면을 채워 바깥쪽으로만 두른 것처럼 보입니다.
text-shadow로도 외곽선을 만들 수 있지 않나요?
가능합니다. 네 방향(상하좌우)으로 1px씩 그림자를 겹치는 고전 기법인데, 두꺼운 외곽선은 계단 현상이 생깁니다. 1~2px의 얇은 테두리엔 text-shadow, 그 이상은 text-stroke가 깔끔합니다.
외곽선만 있고 속이 빈 글자도 되나요?
됩니다. 복사한 코드에서 color(채움색)를 transparent로 바꾸면 아웃라인만 남는 중공 글자가 됩니다. 히어로 타이틀 장식에 자주 쓰이는 스타일입니다.
