LabEx
로그인무료 가입

CSS 로 콘텐츠 선택 비활성화

Beginner

This tutorial is from open-source community. Access the source code

소개

이 랩에서는 CSS 프로그래밍을 살펴보고 user-select 속성을 탐구합니다. 이 랩은 사용자가 콘텐츠를 복사하는 것을 방지하는 데 유용할 수 있는 웹 페이지의 특정 요소 선택을 비활성화하는 방법을 가르치는 것을 목표로 합니다. 이 랩을 마치면 user-select 속성의 사용법과 웹 디자인에 미치는 영향에 대한 이해도가 높아질 것입니다.

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

선택 비활성화

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

요소의 콘텐츠를 선택할 수 없도록 하려면 CSS 속성 user-select: none을 선택기에 추가하십시오. 그러나 이 방법은 사용자가 콘텐츠를 복사하는 것을 완전히 안전하게 방지하지는 못합니다.

예시:

<p>You can select me.</p>
<p class="unselectable">You can't select me!</p>
.unselectable {
  user-select: none;
}

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

요약

축하합니다! 선택 비활성화 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.