CSS 를 활용한 사용자 정의 텍스트 선택 마스터하기

소개

이 랩에서는 CSS 프로그래밍의 세계를 탐구하고 다양한 CSS 속성과 선택자를 사용하여 웹 페이지 스타일을 지정하는 방법을 배웁니다. 이 랩의 목적은 초급 및 중급 개발자에게 시각적으로 매력적인 웹 페이지를 만드는 기술을 향상시킬 수 있는 실질적인 경험을 제공하는 것입니다. 이 랩을 통해 일반적인 CSS 문제를 해결하고 코딩 시 모범 사례를 사용하는 방법도 배우게 됩니다.

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

사용자 정의 텍스트 선택

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

선택된 텍스트의 스타일을 수정하려면 ::selection 의사 선택자 (pseudo-selector) 를 사용하십시오. 다음은 단락 요소 내의 텍스트를 선택하고 스타일을 지정하는 예제 코드 조각입니다.

<p class="custom-text-selection">Select some of this text.</p>

::selection {
  background: aquamarine;
  color: black;
}

.custom-text-selection::selection {
  background: deeppink;
  color: white;
}

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

요약

축하합니다! 사용자 정의 텍스트 선택 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.