반응형
물론 우회적으로 뚫는 방법들이 있겠지만 이것이 최선입니다. 이 글은 모든 방법을 적용해서 컨텐츠를 보호할 수 있도록 도와드립니다. 자바스크립트 드래그 방지는 확장 프로그램으로 쉽게 끌 수 있기 때문에 CSS와 HTML을 통한 방법도 병행했습니다.
HTML
<!--바디 태그-->
<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false" onkeydown="return false">
- oncontextmenu = "return false" : 우클릭 방지
- onseletstart = "return false" : 마우스 드래그 방지
- ondragstart = "return false" : 이미지 복사 드래그 방지
- onkeydown = "return false" : 키보드 단축키 복사 방지
CSS
body, html에 적용합시다.
/*텍스트 선택 불가*/
-webkit-user-select: none !important;
-moz-user-select: -moz-none !important;
-ms-user-select: none !important;
user-select: none !important;
JavaScript
헤드 태그 안쪽에서 src로 불러오시면 됩니다.
// 오른쪽 클릭 방지
document.oncontextmenu = function() {
return false;
}
// 드래그 방지
var omitformtags = ["input", "textarea", "select"]
omitformtags = omitformtags.join("|")
function disableselect(e) {
if (omitformtags.indexOf(e.target.tagName.toLowerCase()) == -1)
return false
}
function reEnable() {
return true
}
if (typeof document.onselectstart != "undefined")
document.onselectstart = new Function("return false")
else {
document.onmousedown = disableselect
document.onmouseup = reEnable
}
반응형
'Web' 카테고리의 다른 글
| [Web] 모바일 웹처럼 부드러운 스크롤 효과 (0) | 2022.09.08 |
|---|---|
| [Web] Web App 웹앱이란? (5) | 2022.09.06 |
| [Web/CSS] 모바일 CSS 수직 중앙 정렬하기 (0) | 2022.09.05 |
| [Web/CSS] 반응형 정사각형 만들기 (0) | 2022.09.05 |
| [Web] GSAP 간단한 애니메이션 만들기 (0) | 2022.09.05 |
댓글