디센더를 자르지 않는 우아한 텍스트 밑줄 만들기 - CSS 튜토리얼

소개

이 랩에서는 CSS 를 사용하여 디센더 (descender) 를 자르지 않는 예쁜 텍스트 밑줄을 만드는 방법을 배웁니다. text-shadow와 linear-gradient를 사용한 background-image를 조합하여 실제 밑줄 역할을 하는 그라데이션을 만들 수 있으며, 텍스트는 선택 가능한 상태로 유지됩니다. 이 기술은 text-decoration: underline보다 시각적으로 더 매력적인 대안을 제공합니다.

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

예쁜 텍스트 밑줄

index.html과 style.css는 이미 VM 에 제공되어 있습니다.

디센더가 밑줄을 자르는 것을 방지하려면, text-shadow에 네 개의 값을 사용하여 디센더가 밑줄과 만나는 선을 덮는 두꺼운 그림자를 만듭니다. text-shadow의 색상이 background 색상과 일치하는지 확인하고, 더 큰 글꼴의 경우 px 값을 조정합니다. linear-gradient()와 currentColor를 사용하여 background-image로 실제 밑줄을 만듭니다. background-position, background-repeat, background-size를 설정하여 그라데이션을 올바른 위치에 배치합니다. ::selection 의사 클래스 선택자를 사용하여 텍스트 그림자가 텍스트 선택을 방해하지 않도록 합니다. 이 효과는 기본적으로 text-decoration-skip-ink: auto로 구현되지만, 밑줄에 대한 제어력이 더 적습니다.

다음은 코드 스니펫 예시입니다.

<div class="container">
  <p class="pretty-text-underline">
    Pretty text underline without clipping descenders.
  </p>
</div>

.container {
  background: #f5f6f9;
  color: #333;
  padding: 8px 0;
}

.pretty-text-underline {
  display: inline;
  text-shadow:
    1px 1px #f5f6f9,
    -1px 1px #f5f6f9,
    -1px -1px #f5f6f9,
    1px -1px #f5f6f9;
  background-image: linear-gradient(90deg, currentColor 100%, transparent 100%);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: 100% 1px;
}

.pretty-text-underline::selection {
  background-color: rgba(0, 150, 255, 0.3);
  text-shadow: none;
}

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

요약

축하합니다! 예쁜 텍스트 밑줄 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.