[CSS] text에 테두리 넣기(with. react, tailwindcss)

이미지를 사용하지 않고 글자에 테두리를 넣어 강조를 할 필요가 생겼습니다.

목표하는 디자인

 

이를 구현하기 위해서는 CSS를 통해 글자에 테두리를 적용할 수 있는 방법은 2가지가 있습니다.

 

1. -webkit-text-stroke

text에 테두리 적용 결과

.text {
  -webkit-text-stroke: 1.2px black;
}

 

해당 방식의 경우 webkit이 지원하는 크롬, 사파리, 새 버전의 오페라 브라우저 및 iOS 환경에서 거의 모든 브라우저에서 사용할 수 있습니다. 하지만 사용자가 어떤 브라우저를 사용해 접근하는지 알 수 없기 때문에 적용이 되지 않을 수 있다는 단점이 있습니다.

 

+) react에서 inline 스타일로 사용하는 방법 + tailwindcss를 통해 사용하는 방법(with tailwind.config.js)

// react
<div style={{ WebkitTextStroke: "1px black" }} ... />


// tailwind in react
// tailwind.config.js
import plugin from 'tailwindcss/plugin';

export default {
  ...
  plugins: [
    plugin(({ addUtilities }) => {
      const newUtilities = {
        '.text-stroke-1': {
          '-webkit-text-stroke': '1px black',
        },
      };
      addUtilities(newUtilities);
    }),
  ],
};

// x.jsx
<div className="text-stroke-1" ... />

 

2. text-shadow

text에 테두리 넣기

.text {
  text-shadow: -1.5px 0 black, 0 1.5px black, 1.5px 0 black, 0 -1.5px_black
}

1번과 다른 방식으로 text-shadow 속성을 사용하는 방법이 있습니다.

 

text-shadow 속성이 ','(콤마)를 통해 중첩이 가능하다는 점을 이용해 글자를 둘러싸는 방법입니다. 해당 방식은 CanIUse 사이트를 통해 확인해 보면 98.42%로 사용이 가능합니다. 1번이 96.35%라는 높은 수치보다 더 높기 때문에 해당 방식을 추천합니다.

 

+) tailwind arbitrary in react

<div className="[text-shadow:_-1.5px_0_black,_0_1.5px_black,_1.5px_0_black,_0_-1.5px_black]" ... />

 

참고

[css]text에 테두리(border) 넣기, 나를 제외한 천재들, 2024.10.22

text-shadow, mdn, 2024.11.07

css 접두사(css prefix, webkit, moz, ms, o)가 의미하는 것은?, Jake Seo, 2024.11.07

adding custom styles, tailwindcss, 2024.11.07

caniuse, 2024.11.07