실시간 미리보기 CSS 텍스트 외곽선(Stroke) 생성기
-webkit-text-stroke로 텍스트에 외곽선을 그리세요 — 두께와 외곽선 색을 채움 색과 따로 정해 속이 빈 글자를 만들 수 있습니다.
외곽선은 글자 윤곽선을 가운데로 두고 그려지므로, 두꺼우면 두께의 절반이 글자 안쪽을 파먹습니다. 외곽선을 먼저 그리면 채움이 그 안쪽 절반을 덮어 글자 모양이 그대로 남고, 보이는 외곽선은 설정한 두께의 절반이 됩니다.
비워 두면 선언만 복사되어 style 속성이나 이미 있는 규칙에 바로 넣을 수 있습니다. .css 다운로드는 늘 완전한 규칙이며, 선택자가 없으면 .outlined로 감쌉니다.
-webkit-text-stroke: 2px #000000; color: #ffd000;
이 텍스트 외곽선 생성기가 하는 일
이 도구는 -webkit-text-stroke 속성으로 CSS 텍스트 외곽선을 만듭니다. 슬라이더로 외곽선 두께를 정하고, 외곽선 색상과 채움(글자) 색상을 고른 뒤 원하는 샘플 텍스트를 입력하면 코드 위에서 결과가 즉시 렌더링됩니다. 색상 선택기 옆에는 ‘외곽선 색상 (16진수)’, ‘채움 색상 (16진수)’ 칸이 있어 디자인 파일에서 복사한 hex 값을 그대로 붙여 넣을 수 있고, hex가 아닌 값은 마지막으로 맞았던 색을 유지한 채 어느 칸이 틀렸는지 알려 줍니다. 마음에 들면 한 번 클릭으로 -webkit-text-stroke 선언과 그에 맞는 color 줄이 담긴, 바로 붙여넣을 수 있는 코드 블록이 복사되어 스타일시트에 그대로 넣을 수 있습니다. 헤드라인 처리, 속이 빈 텍스트, 배지, 단순한 채움만으로는 부족한 장식용 서체에 유용합니다.
외곽선 값이 만들어지는 방법
CSS 텍스트 외곽선은 -webkit-text-stroke: width color 형식으로 작성되며, 여기서 두께는 픽셀 단위 길이이고 색상은 각 글자의 가장자리를 칠합니다. 이 생성기는 슬라이더 두께(px)와 선택한 외곽선 색상을 이어 붙이고, 채움을 위한 별도의 color 선언과 짝지어 둘을 독립적으로 다룹니다 — 밝은 채움에 어두운 외곽선을 유지하거나 반대로 뒤집어 속이 빈 느낌을 낼 수도 있습니다. 두께가 0이면 외곽선이 사라집니다. 외곽선 불투명도나 채움 불투명도를 낮추면 그 색이 rgba()로 쓰이고, 채움 불투명도를 끝까지 내리면 속이 빈 글자가 됩니다. 선택자를 적으면 결과가 완전한 규칙이 되고, 비워 두면 선언만 나오며, 다운로드로 받는 .css 파일은 늘 완전한 규칙입니다. 시작 예시에서는 속이 빈 제목, 스티커 글자, 희미한 외곽선을 불러오고, 미리보기 배경은 CSS를 건드리지 않고 미리보기 배경만 페이지 테마, 흰색, 검정, 다른 색으로 바꿉니다.
자주 묻는 질문
속성 이름이 왜 -webkit-로 시작하나요?
텍스트 외곽선은 벤더 접두사가 붙은 -webkit-text-stroke 속성으로 제공되며, Chrome, Edge, Safari, Firefox에서 모두 지원됩니다. 오늘날 텍스트에 외곽선을 넣는 가장 안정적이고 폭넓게 지원되는 방법이 -webkit- 접두사를 쓰는 것이라, 생성된 코드도 이를 사용합니다.
외곽선 색상과 채움 색상은 어떻게 다른가요?
채움 색상은 CSS color 속성으로 지정하는 글자의 일반 색이고, 외곽선 색상은 각 글자의 가장자리를 두르는 선을 칠합니다. 두꺼운 외곽선에 배경과 같은 채움 색을 쓰면 속이 빈, 외곽선만 있는 모양을 만들 수 있고, 채움 불투명도를 0%로 내리면 채움이 아예 투명해집니다.
두꺼운 외곽선이 글자를 파먹는 이유는요?
외곽선은 글자 윤곽선을 가운데에 두고 양쪽으로 그려지기 때문입니다. paint-order 옵션을 켜면 채움이 외곽선 위에 칠해져 두꺼운 외곽선이 바깥으로만 자랍니다.
외곽선을 반투명하게 하거나, 완전한 CSS 규칙을 받거나, 만들어 둔 모양에서 시작할 수 있나요?
네. 외곽선 불투명도나 채움 불투명도를 낮추면 그 색이 CSS와 미리보기에 rgba()로 쓰이고, 끝까지 올려 두면 원래의 hex 그대로이며, 채움 불투명도를 끝까지 내리면 속이 빈 글자가 됩니다. 선택자를 적으면 결과와 복사가 들여쓴 완전한 규칙이 되고, 비워 두면 style 속성이나 이미 있는 규칙에 넣을 선언만 나옵니다. 다운로드는 text-stroke.css를 늘 완전한 규칙으로 저장하며, 선택자가 없으면 .outlined로 감쌉니다. 시작 예시에서 속이 빈 제목, 스티커 글자, 희미한 외곽선을 고르면 두께, 두 색과 불투명도, paint-order, 그리고 그 모양이 잘 보이는 배경까지 한 번에 맞춰집니다.
색을 고르는 대신 hex 값을 입력하거나 붙여 넣을 수 있나요?
네. 색상 선택기마다 옆에 ‘외곽선 색상 (16진수)’, ‘채움 색상 (16진수)’ 칸이 있습니다. #rgb나 #rrggbb, 투명도가 있으면 #rgba나 #rrggbbaa로 쓴 값은 CSS와 미리보기, 링크에 바로 들어가고, 그 밖의 값은 마지막으로 맞았던 색을 유지하며 칸 아래에 어느 칸이 16진수 색이 아닌지 알려 줍니다. 짧은 형식이나 여덟 자리 hex도 선택기에서 그 색으로 보입니다. 불투명도를 낮추면 입력한 hex의 투명도에 불투명도 슬라이더 값이 곱해집니다.