반응형
브라우저에서 텍스트를 복사하지 못하도록 하기 위해서는 javscript 제어도 필요하지만 css에서도 텍스트를 드래그 했을 때 선택된 상태로 못하도록 조치할 수 있습니다.
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */
}
예시를 작성한다면..
<html>
<head>
<title>테스트</title>
</head>
<style>
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */
}
</style>
<body>
<p>
선택가능한 텍스트
</p>
<p class="noselect">
선택 불가능한 텍스트
</p>
</body>
</html>
위와 같이 html 파일을 작성한 후 브라우저에서 실행하여 드래그를 해보면 아래 캡쳐화면 처럼
두분째 줄인 "선택 불가능한 텍스트" 부분은 선택이 불가능할 것입니다.
 |
브라우저별로 제각기 다르니 꼭 확인해 보셔야 합니다~!
반응형
'IT이야기' 카테고리의 다른 글
| 파이썬에서 리눅스 명령어, 프로그램 호출하는 방법 (0) | 2021.02.17 |
|---|---|
| Javascript json 객체 복사 (0) | 2021.02.17 |
| Javascript == 와 === 차이점 (0) | 2021.02.16 |
| "px", "in", "mm", "pt", "dp", "dip", "sp" 등 각종 단위 설명과 차이점 (0) | 2021.02.16 |
| 파이썬 - 파일이 존재하는지 확인하는 방법 (0) | 2021.02.16 |