에칭 텍스트 효과 | CSS 스타일링 기법

소개

이번 랩에서는 CSS 를 사용하여 "에칭 (etched)" 또는 조각된 텍스트 효과를 만드는 방법을 배우겠습니다. 이 효과는 웹 디자인에 독특하고 세련된 느낌을 더할 수 있으며, 놀랍도록 쉽게 구현할 수 있습니다. 그림자, 배경 및 텍스트 색상을 조정하여 텍스트가 배경에 새겨진 듯한 착시 효과를 만들 수 있습니다. 이 재미있고 창의적인 기술을 함께 탐구해 봅시다!

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 100%입니다.학습자들로부터 92%의 긍정적인 리뷰율을 받았습니다.

에칭 텍스트 (Etched Text)

index.html 및 style.css는 이미 VM 에 제공되었습니다.

배경에 텍스트에 대한 "에칭 (etched)" 또는 조각 효과를 만들려면 다음 CSS 속성을 사용하십시오.

.etched-text {
  text-shadow: 0 2px white;
  font-size: 1.5rem;
  font-weight: bold;
  color: #b8bec5;
}

text-shadow 속성은 원점 위치에서 수평으로 0px, 수직으로 2px 떨어진 흰색 그림자를 생성합니다. 효과가 제대로 작동하려면 배경이 그림자보다 어두워야 합니다. 또한, 텍스트 색상은 배경에서 조각된 것처럼 보이도록 약간 흐리게 처리해야 합니다. 마지막으로, 효과를 얻으려면 단락과 같은 원하는 HTML 요소에 etched-text 클래스를 적용하십시오.

<p class="etched-text">I appear etched into the background.</p>

오른쪽 하단 모서리에 있는 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

요약

축하합니다! 에칭 텍스트 (Etched Text) 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.

CSS 를 활용한 에칭 텍스트 효과 만들기

소개

에칭 텍스트 (Etched Text)

요약