[CSS] 글자에 테두리 적용하는 방법 (text-stroke, text-shadow)

배경

오늘은 글자에 테두리를 줄 일이 생겼다.

있을까? 하면서도 있을거 같았는데 혹시나 box-shadow처럼 box에 먹어버리는게 아닐까 걱정했다.

 

하지만 잘 나왔다.

 

h1 {
	-webkit-text-stroke-width: 3px;
	-webkit-text-stroke-color: white
}

위와 같이 두께, 색상을 설정할 수 있다.

 

결과

적용 전

적용 후

줄여서 쓸 수도 있다.

h1 {
	-webkit-text-stroke: 3px white;
}

 

하지만 위 방법은 요즘 지원되지 않는다는 말이 있어서 다른 방법도 알아봤다.

 

다른 방법

text-shadow을 이용한 방법:

/* 텍스트에 테두리를 주는 스타일 */
.text-with-border {
  color: white; /* 텍스트 색상 */
  font-size: 36px; /* 텍스트 크기 */
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black; /* 테두리 효과 설정 */
}

 

위와 같이 하면 아래 결과가 나온다.

결과

적용 화면

이렇게 적용이 된다.

 

위의 CSS 코드에서 text-shadow 속성을 사용하여 텍스트의 테두리 효과를 만들었다.

text-shadow 속성은 여러 개의 그림자를 지정할 수 있는데, 각각의 그림자를 ','로 구분하여 지정한다. 그림자의 위치는 x-offset, y-offset으로 조절하며, 테두리 색상은 color로 설정합니다. 여러 개의 그림자를 사용하여 테두리 효과를 강조하게 만들 수 있다.

 

위의 예제는 글자에 검정색 테두리를 주는 효과를 보여주는데, 텍스트의 크기나 색상, 그림자의 위치와 색상 등을 원하는 대로 조절하여 다양한 테두리 효과를 만들 수 있다. 하지만 주의해야 할 점은 text-shadow 속성은 텍스트 그림자 효과이기 때문에, 텍스트의 배경 색상과 겹치는 부분에서는 테두리 효과가 올바르게 나타나지 않을 수 있다. 이런 경우에는 텍스트를 감싸는 추가적인 요소를 생성하여 테두리를 주는 방법도 고려할 수 있다.

 

다른 CSS 글 보기

https://emessell.tistory.com/entry/CSS-keyframes-slide-in-slide-out-%EB%A7%8C%EB%93%A4%EA%B8%B0

[CSS] keyframes | slide-in, slide-out 만들기

 

https://emessell.tistory.com/entry/CSS-Transition

[CSS] Transition