HTML의 개요 텍스트

이 기사에서는 CSS를 사용하여 HTML의 텍스트를 요약하는 방법을 소개합니다.

text-shadow CSS 속성을 사용하여 HTML의 텍스트에 대한 개요 제공

text-shadow는 텍스트에 그림자를 추가하는 CSS 속성입니다. 쉼표로 구분된 그림자 목록을 값으로 사용하며 각 그림자에는 X 오프셋, Y 오프셋, 흐림 반경 및 색상이 포함됩니다.

예를 들어 텍스트에 tet-shadow 속성이 1px 1px 3px black인 경우 텍스트의 텍스트 그림자에는 1px의 X 오프셋, 1px의 Y 오프셋, 흐림 반경이 있음을 의미합니다. 3px 및 검정 색상이 있습니다. X-offset 및 Y-offset은 텍스트 그림자의 방향을 담당하며 X-offset은 수평 방향의 그림자를 나타내고 Y-offset은 수직 방향의 그림자를 나타냅니다.

흐림 반경은 그림자가 흐려질 텍스트로부터의 거리를 정의합니다. 텍스트에 완전한 윤곽선을 제공하려면 모든 방향으로 윤곽선이 있는 텍스트에 대해 text-shadow 값을 여러 개 설정해야 합니다.

예를 들어 <div>를 만들고 그 안에 임의의 텍스트를 작성하고 <div>에 outline이라는 클래스 이름을 지정합니다. CSS에서 outline 클래스를 선택합니다.

color 속성을 white로 설정합니다. 다음으로 div의 text-shadow 속성을 -1px -1px 0 #000, 1px -1px 0 black,-1px 1px 0 black, 1px 1px 0 black;으로 설정합니다.

여기에서 text-shadow 속성에 대해 4쌍의 값을 적용했습니다. 모든 방향으로 텍스트의 윤곽을 만들고 텍스트가 흐려지는 것을 원하지 않기 때문에 흐림 반경에 0을 사용했습니다.

오프셋 값은 음수 값도 허용합니다. X 오프셋의 음수 값은 왼쪽에 그림자를 만들고 음수 Y 오프셋은 텍스트 상단에 그림자를 만듭니다.

또한 텍스트와 윤곽선이 흰색 배경에 표시되도록 텍스트 색상을 흰색으로, 그림자를 검정색으로 설정합니다.

코드 - HTML:

<div class="outline">
 Text shadow can be used to give an outline to the text.
</div>

코드 - CSS:

.outline {
  color: white;
  text-shadow:
               -1px -1px 0 black,
                1px -1px 0 black,
               -1px 1px 0 black,
                1px 1px 0 black;
}

따라서 CSS text-shadow 속성을 사용하여 HTML의 텍스트 개요를 제공할 수 있습니다.