AAtomic CSS

text-stroke

텍스트에 외곽선(스트로크)을 추가하는 속성입니다. 텍스트를 투명하게 만들고 외곽선만 보이게 하는 아웃라인 효과, 또는 텍스트에 테두리를 추가하는 데 사용합니다. 클래스 패턴은 ts{크기}{색상코드}입니다.

네이밍 규칙

ts = text stroke의 앞글자 조합. 뒤에 크기(단위 포함)와 6자리 HEX 색상을 붙입니다.

패턴예시CSS
ts{크기}{HEX}ts1pxFFFFFFtext-stroke: 1px #FFFFFF
ts{크기}{HEX}ts2px6366F1text-stroke: 2px #6366F1
ts{크기}{HEX}ts3pxFF0000text-stroke: 3px #FF0000

클래스 예시

클래스CSS설명
ts1pxFFFFFFtext-stroke: 1px #FFFFFF1px 흰색 외곽선
ts2pxFFFFFFtext-stroke: 2px #FFFFFF2px 흰색 외곽선
ts1px000000text-stroke: 1px #0000001px 검정 외곽선
ts2px6366F1text-stroke: 2px #6366F12px 인디고 외곽선
ts3pxFF0000text-stroke: 3px #FF00003px 빨간 외곽선

시각적 비교

다양한 두께와 색상의 text-stroke 효과입니다.

1px White Stroke

Atomic CSS

ts1pxFFFFFF ct

2px Indigo Stroke

Atomic CSS

ts2px6366F1 ct

1px Stroke + 색상 유지

Atomic CSS

ts1pxFFFFFF cFAFAFA

3px Red Stroke

Atomic CSS

ts3pxFF0000 ct

아웃라인 텍스트 패턴

텍스트 색상을 투명(ct = color: transparent)으로 설정하면 외곽선만 보이는 아웃라인 효과를 만들 수 있습니다.

<!-- 아웃라인 텍스트 (외곽선만 보임) -->
<h1 class="fs6rem fw900 ts2pxFFFFFF ct">
  Outline Text
</h1>

<!-- ct = color: transparent → 텍스트 색상을 투명으로 -->
<!-- ts2pxFFFFFF = text-stroke: 2px #FFFFFF -->

사용 예시

<!-- 히어로 타이틀 아웃라인 -->
<section class="df jcc aic h100vh bg000000">
  <h1 class="fs8rem fw900 ts2pxFFFFFF ct">
    ATOMIC CSS
  </h1>
</section>

<!-- 텍스트에 테두리 추가 (색상 유지) -->
<h2 class="fs4rem fw800 ts1px000000 cFFFFFF">
  Stroke + Fill
</h2>

<!-- 컬러 아웃라인 -->
<p class="fs3-2rem fw700 ts1px6366F1 ct">
  Indigo Outline
</p>

팁 & 주의사항

ts 약어 충돌

ts는 transform: scale()에도 사용됩니다. ts1-5 = scale(1.5), ts1pxFFFFFF = text-stroke. 크기+색상이 붙으면 text-stroke로 인식됩니다.

비표준 속성

text-stroke는 W3C 표준이 아닌 WebKit 확장 속성입니다. 최신 브라우저(Chrome, Safari, Edge, Firefox)에서 모두 지원하지만, 공식 표준은 아닙니다.

아웃라인 효과의 핵심

외곽선만 보이게 하려면 반드시 ct(color: transparent)와 함께 사용하세요. 색상이 있으면 stroke가 텍스트 뒤에 그려져서 두꺼운 글자처럼 보입니다.

colortext-shadowfont-weightfont-size