CSS를 사용하여 텍스트에 외곽선, stroke 효과를 주는 방법을 알아봅니다.
외곽선은 텍스트를 강조하는 효과적인 방법입니다. 간단하게 css를 사용하여 사용하는 것이 가능한데 가장 간단한 방법은 아래처럼 -webkit-text-stroke를 사용하는 방법입니다.
-webkit-text-stroke: 1px #000
다만, 이 방법은 매우 편리한 방법이지만 아쉽게도 표준 방법은 아니라 웹킷 및 모질라 계열의 브라우저에서만 적용됩니다. 사용할 경우 아래처럼 css에 적용하시기 바랍니다.
외곽선은 텍스트를 강조하는 효과적인 방법입니다. 간단하게 css를 사용하여 사용하는 것이 가능한데 가장 간단한 방법은 아래처럼 -webkit-text-stroke를 사용하는 방법입니다.
-webkit-text-stroke: 1px #000
다만, 이 방법은 매우 편리한 방법이지만 아쉽게도 표준 방법은 아니라 웹킷 및 모질라 계열의 브라우저에서만 적용됩니다. 사용할 경우 아래처럼 css에 적용하시기 바랍니다.
.text-stroke {
-webkit-text-stroke: 1px #000;
}
-webkit-text-stroke: 1px #000;
}
이제 텍스트에 외곽선이 선명하게 나타납니다.
그렇다면 또 다른 방법을 알아봅니다.
# -webkit-text-stroke 크로스 브라우징 방법아래와 같은 방법을 사용하면 텍스트음영효과인 text-shadow를 이용하여 비슷한 효과를 만들 수 있습니다. 아래 코드를 봐주세요.
.text-stroke {
color: #f00;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
color: #f00;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
이 방법은 text-shadow가 적용되는 대부분의 브라우저에서 구현됩니다. 매우 효과적인 방법입니다.
# 실제 외곽선 적용된 예제보기
만약 아래와 같은 html에 위 css를 적용하여 외곽선을 직접 구현해보겠습니다.
<span class="text-stroke">THEVOS</span>
위 코드의 실행결과는 아래와 같습니다.
THEVOS
CSS object-fit 속성
Facebook [ko]댓글