실시간 미리보기 CSS 텍스트 외곽선(Stroke) 생성기

이 텍스트 외곽선 생성기가 하는 일

이 도구는 -webkit-text-stroke 속성으로 CSS 텍스트 외곽선을 만듭니다. 슬라이더로 외곽선 두께를 정하고, 외곽선 색상과 채움(글자) 색상을 고른 뒤 원하는 샘플 텍스트를 입력하면 코드 위에서 결과가 즉시 렌더링됩니다. 마음에 들면 한 번 클릭으로 -webkit-text-stroke 선언과 그에 맞는 color 줄이 담긴, 바로 붙여넣을 수 있는 코드 블록이 복사되어 스타일시트에 그대로 넣을 수 있습니다. 헤드라인 처리, 속이 빈 텍스트, 배지, 단순한 채움만으로는 부족한 장식용 서체에 유용합니다.

외곽선 값이 만들어지는 방법

CSS 텍스트 외곽선은 -webkit-text-stroke: width color 형식으로 작성되며, 여기서 두께는 픽셀 단위 길이이고 색상은 각 글자의 가장자리를 칠합니다. 이 생성기는 슬라이더 두께(px)와 선택한 외곽선 색상을 이어 붙이고, 채움을 위한 별도의 color 선언과 짝지어 둘을 독립적으로 다룹니다 — 밝은 채움에 어두운 외곽선을 유지하거나 반대로 뒤집어 속이 빈 느낌을 낼 수도 있습니다. 출력은 결정적이라 같은 두께와 색상은 항상 같은 코드를 만들고, 두께가 0이면 외곽선이 사라집니다.