CSS에서 글꼴 테두리 설정

1. -webkit-text-stroke 속성을 사용하여 CSS의 글꼴에 테두리 적용
2. text-shadow 속성을 사용하여 CSS의 글꼴에 테두리 적용

이 튜토리얼에서는 CSS에서 글꼴에 테두리와 색상을 적용하는 방법을 소개합니다.

-webkit-text-stroke 속성을 사용하여 CSS의 글꼴에 테두리 적용

텍스트에 text-stroke 속성을 사용하여 CSS의 글꼴에 테두리를 적용할 수 있습니다. 기능을 사용하려면 text-stroke 속성 앞에 webkit 접두사를 사용해야 합니다. 그러나 Safari 및 Chrome과 같은 web-kit 기반 브라우저에서만 작동합니다. text-stroke 속성을 사용하면 Adobe Illustrator와 같은 벡터 드로잉 응용 프로그램에서 텍스트를 꾸밀 수 있습니다. 이 속성은 text-stroke-width 및 text-stroke-color라는 다른 두 속성의 축약형입니다. 따라서 text-stroke 속성을 사용하여 텍스트 테두리의 너비와 색상을 정의할 수 있습니다.

예를 들어 HTML의 h1 태그 안에 일부 텍스트를 작성합니다. CSS에서 h1 태그를 선택하고 -webkit-text-stroke 속성을 적용합니다. 너비를 1px로 설정하고 색상을 red로 설정합니다. 그런 다음 font-family 속성을 사용하여 글꼴을 arial로 설정하고 green 색상을 지정합니다.

아래 예는 빨간색 테두리가 있는 녹색 텍스트를 표시합니다. 이것이 다른 색상의 글꼴에 테두리를 설정하는 방법입니다.

예제 코드:

<h1>The green font has red border</h1>

h1 {
 -webkit-text-stroke: 1px red;
 font-family: arial; color: green;
}

text-shadow 속성을 사용하여 CSS의 글꼴에 테두리 적용

text-shadow 속성을 사용하여 text-stroke 속성을 에뮬레이션하여 CSS의 글꼴에 테두리를 적용할 수 있습니다. text-shadow 속성은 텍스트에 그림자를 만드는 데 사용됩니다. 처음 두 값은 h-shadow 및 v-shadow 속성을 나타냅니다. 수평 및 수직 그림자의 위치를 ​​나타냅니다. blur-radius 값을 text-shadow 속성의 세 번째 값으로 설정할 수 있습니다. 그것은 주어진 반경으로 주어진 위치에서 그림자를 흐리게 할 것입니다. 그림자의 색상을 지정하여 text-shadow 속성의 네 번째 값으로 만들 수 있습니다. 이 방법은 대부분의 브라우저에서 작동합니다.

예를 들어, HTML의 h1 태그 안에 일부 텍스트를 작성하십시오. CSS에서 h1 태그를 선택하고 text-shadow 속성을 작성합니다. h-shadow 및 v-shadow 속성 모두에 0 값을 지정하십시오. blur-radius에 2px를 쓰고 red 색상을 지정합니다.

아래 예에서 text-shadow 속성을 사용하여 글꼴의 테두리 기능을 에뮬레이트했습니다. 그림자에 색상을 부여할 때 그림자가 테두리처럼 보이도록 수평 및 수직 반경 값을 0으로 설정했습니다.

예제 코드:

<h1>The black font has red border</h1>

h1 {
 text-shadow: 0 0 2px red;
}