[CSS] 글자에 테두리 넣는 방법 텍스트에 스트로크 넣는 방법

CSS를 이용해 글자에 테두리 효과를 주는 방법을 알아보겠습니다. 글자에 테두리를 넣어 사용자의 시선을 끌 수 있고, 텍스트의 가독성을 높이는 데도 도움이 됩니다. 이 글에서는 CSS를 활용해 글자에 테두리를 주는 방법을 확인해 보겠습니다.

 

-webkit-text-stroke로 글자 외곽선 만드는 방법

-webkit-text-stroke는 CSS에서 글자에 외곽선을 그려주는 속성입니다. 이 속성은 WebKit 기반 브라우저(예: Chrome, Safari, Edge 등)에서만 동작하며 글자의 외곽선 굵기와 색상을 지정할 수 있습니다. 이 속성을 사용하면 그림자 효과 없이도 선명한 글자 테두리를 만들 수 있습니다.

 

// -webkit-text-stroke: <굵기> <색상>;

h2 {
  color: white;
  -webkit-text-stroke: 2px black;
}

위의 CSS는 글자 색은 흰색이고 글자 주변에 2px 두께의 검은 테두리가 적용시키는 CSS 코드입니다.

 

-webkit-text-stroke는 두 개의 하위 속성으로 나뉩니다.

h2 {
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: black;
}

위 두 속성을 개별로 쓸 수도 있고, 줄여서 하나의 단축 속성(-webkit-text-stroke)으로도 사용할 수 있습니다.

 

<section className="text__stroke-wrap">
        <h2 className="paint__order-fill">Text Stroke 텍스트 스트로크</h2>
        <h2 className="paint__order-fill">Text Stroke 텍스트 스트로크</h2>
</section>

.text__stroke-wrap {
  font-family: "Tenada";
  padding: 160px 0;
}

.paint__order-fill {
  margin-top: 32px;
  font-size: 48px;
  color: #7890ff;
  -webkit-text-stroke: 1px #4567ff;
}

위 코드를 사용하면 텍스트에 테두리 효과를 적용할 수 있습니다.

 

paint-order로 글자를 위로 올리는 방법

테두리의 굵기가 얇으면 크게 문제가 없지만 테두리의 굵기가 굵어지면 위 이미지처럼 텍스트를 보기 불편해집니다. 이런 경우 paint-order 속성을 이용하면 됩니다.

 

paint-order는 SVG 텍스트나 도형 요소에서 채우기(fill), 테두리(stroke), 문자(foreground text content)의 그리기 순서를 제어하는 CSS 속성입니다. 일반적인 경우에는 자동으로 정해진 순서대로 렌더링되지만, 이 속성을 사용하면 그 순서를 명시적으로 지정할 수 있습니다.

 

paint-order: normal;

paint-order의 기본 값입니다. paint-order: fill stroke markers와 동일합니다. normal을 명시하지 않고 이처럼 순서를 직접 지정할 수도 있습니다.

 

paint-order: stroke;

글자를 위로 올리려면 paint-order: stroke;를 사용해 주면 됩니다. 이 코드는 paint-oreder: stroke fill markers;로 동작합니다.

 

<section className="text__stroke-wrap">
        <h2 className="paint__order-fill">Text Stroke 텍스트 스트로크</h2>
        <h2 className="paint__order-stroke">Text Stroke 텍스트 스트로크</h2>
</section>

.text__stroke-wrap {
  font-family: "Tenada";
  padding: 160px 0;
}

.paint__order-fill {
  margin-top: 32px;
  font-size: 48px;
  color: #7890ff;
  -webkit-text-stroke: 8px #4567ff;
}

.paint__order-stroke {
  margin-top: 32px;
  font-size: 48px;
  color: #7890ff;
  -webkit-text-stroke: 8px #4567ff;
  paint-order: stroke;
}

paint-order: stroke;를 사용하면 이미지에서 아래 글자처럼 선을 먼저 그리고 글자를 채우므로 선 위에 글자가 채워지게 됩니다.