내 소중한 콘텐츠, 더 이상 뺏기지 마세요! (블로그 우클릭 방지 완벽 가이드)
내 소중한 콘텐츠, 더 이상 뺏기지 마세요!
How to disable right-clicking on Blog & WordPress Website
블로그 우클릭 방지 완벽 가이드
블로그에서 우클릭 방지하는 방법 총정리 (Blogger, Tistory, WordPress)
웹사이트나 블로그를 운영하다 보면, 콘텐츠 무단 복사나 이미지 저장을 막고 싶을 때가 있습니다. 가져가면 사실 기분이 좋지는 않지요.
이번 글에서는 다양한 우클릭 방지 방법과 플랫폼별 적용법을 정리했습니다.
 |
| 내 소중한 콘텐츠, 더 이상 뺏기지 마세요! (블로그 우클릭 방지 완벽 가이드) |
1️⃣ HTML 속성으로 간단하게 차단
<body oncontextmenu="return false;">
<p>이 영역에서는 우클릭이 제한됩니다.</p>
</body>
장점: 코드 한 줄로 간단 적용
단점: 개발자 도구로 쉽게 우회 가능
<p>이 영역에서는 우클릭이 제한됩니다.</p>
</body>
장점: 코드 한 줄로 간단 적용
단점: 개발자 도구로 쉽게 우회 가능
2️⃣ 자바스크립트로 전체 페이지 차단
<script>
document.addEventListener("contextmenu", function(event) {
event.preventDefault(); // 우클릭 메뉴 차단
});
</script>
Silent 버전: 알림 없이 차단
Alert 버전: 알림창 표시 가능
document.addEventListener("contextmenu", function(event) {
event.preventDefault(); // 우클릭 메뉴 차단
});
</script>
Silent 버전: 알림 없이 차단
Alert 버전: 알림창 표시 가능
3️⃣ 특정 영역만 우클릭 차단
<div id="protected-area" style="border:2px dashed red; padding:20px;">
이 영역은 보호되어 있습니다.
</div>
<script>
document.getElementById("protected-area").addEventListener("contextmenu", function(event) {
event.preventDefault();
});
</script>
특정 영역만 보호 가능
댓글, 본문, 이미지 구역 등 선택적 적용 가능
이 영역은 보호되어 있습니다.
</div>
<script>
document.getElementById("protected-area").addEventListener("contextmenu", function(event) {
event.preventDefault();
});
</script>
특정 영역만 보호 가능
댓글, 본문, 이미지 구역 등 선택적 적용 가능
4️⃣ 이미지 드래그 방지 (CSS)
<style>
img {
-webkit-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
}
</style>
이미지를 드래그해서 복사하는 것을 막음
Firefox에서는 완벽 차단 불가
img {
-webkit-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
}
</style>
이미지를 드래그해서 복사하는 것을 막음
Firefox에서는 완벽 차단 불가
5️⃣ 키보드 단축키 차단 (개발자 도구 방지)
<script>
document.addEventListener("keydown", function(e) {
if (e.keyCode === 123 || // F12
(e.ctrlKey && e.shiftKey && e.keyCode === 73) || // Ctrl+Shift+I
(e.ctrlKey && e.keyCode === 85)) { // Ctrl+U
e.preventDefault();
}
});
</script>
Chrome / Edge에서 효과적
Firefox / Safari에서는 제한적
document.addEventListener("keydown", function(e) {
if (e.keyCode === 123 || // F12
(e.ctrlKey && e.shiftKey && e.keyCode === 73) || // Ctrl+Shift+I
(e.ctrlKey && e.keyCode === 85)) { // Ctrl+U
e.preventDefault();
}
});
</script>
Chrome / Edge에서 효과적
Firefox / Safari에서는 제한적
6️⃣ Blogger 전용 통합 Silent 코드
<style>
img {
-webkit-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
}
</style>
<script>
document.addEventListener("contextmenu", function(event) {
event.preventDefault();
});
document.addEventListener("keydown", function(e) {
if (e.keyCode === 123 ||
(e.ctrlKey && e.shiftKey && e.keyCode === 73) ||
(e.ctrlKey && e.keyCode === 85)) {
e.preventDefault();
}
});
</script>
알림창 없이 조용히 차단 블로그스팟
img {
-webkit-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
}
</style>
<script>
document.addEventListener("contextmenu", function(event) {
event.preventDefault();
});
document.addEventListener("keydown", function(e) {
if (e.keyCode === 123 ||
(e.ctrlKey && e.shiftKey && e.keyCode === 73) ||
(e.ctrlKey && e.keyCode === 85)) {
e.preventDefault();
}
});
</script>
알림창 없이 조용히 차단 블로그스팟
Blogger가장 간단
HTML/JS 가젯에 넣어 사용 /필자 사용 중임
<!-- 우클방 -->
<script>['contextmenu','selectstart'].forEach(function(t){window.addEventListener(t,function(e){e.preventDefault();});});</script>
7️⃣ 브라우저별 호환성 최적화
<script>
(function() {
const ua = navigator.userAgent.toLowerCase();
// 모든 브라우저 공통: 우클릭 차단
document.addEventListener("contextmenu", function(event) {
event.preventDefault();
});
// Chrome / Edge → 강력 차단
if (ua.includes("chrome") || ua.includes("edg")) {
document.querySelectorAll("img").forEach(img => {
img.style.pointerEvents = "none"; // 클릭/드래그 차단
});
document.addEventListener("keydown", function(e) {
if (e.keyCode === 123 ||
(e.ctrlKey && e.shiftKey && e.keyCode === 73) ||
(e.ctrlKey && e.keyCode === 85)) {
e.preventDefault();
}
});
}
// Firefox / Safari → 우클릭만 차단
})();
</script>
Chrome / Edge → 우클릭, 이미지, 단축키 강력 차단
Firefox / Safari → 우클릭만 차단, 이미지 클릭 유지
(function() {
const ua = navigator.userAgent.toLowerCase();
// 모든 브라우저 공통: 우클릭 차단
document.addEventListener("contextmenu", function(event) {
event.preventDefault();
});
// Chrome / Edge → 강력 차단
if (ua.includes("chrome") || ua.includes("edg")) {
document.querySelectorAll("img").forEach(img => {
img.style.pointerEvents = "none"; // 클릭/드래그 차단
});
document.addEventListener("keydown", function(e) {
if (e.keyCode === 123 ||
(e.ctrlKey && e.shiftKey && e.keyCode === 73) ||
(e.ctrlKey && e.keyCode === 85)) {
e.preventDefault();
}
});
}
// Firefox / Safari → 우클릭만 차단
})();
</script>
Chrome / Edge → 우클릭, 이미지, 단축키 강력 차단
Firefox / Safari → 우클릭만 차단, 이미지 클릭 유지
8️⃣ 블로그 플랫폼별 적용 방법
플랫폼 적용 방법 비고
Blogger 레이아웃 → HTML/JavaScript 가젯 → 코드 붙여넣기 Footer 영역 추천
Tistory 스킨 편집 → </body> 직전 또는 HTML 위젯 전체 블로그 적용 가능
WordPress 테마 편집기 → footer.php에 추가
또는 플러그인(Insert Headers and Footers) 사용 Silent 코드 적용 가능
Tistory 스킨 편집 → </body> 직전 또는 HTML 위젯 전체 블로그 적용 가능
WordPress 테마 편집기 → footer.php에 추가
또는 플러그인(Insert Headers and Footers) 사용 Silent 코드 적용 가능
네이버 블로그 HTML 삽입 불가 → 복사/스크랩 제한 기능 사용 코드 적용 불가
Brunch / Medium HTML 삽입 불가 → 플랫폼 제공 기능 사용 코드 적용 불가
직접 만든 HTML </body> 직전 삽입 가장 안정적
Brunch / Medium HTML 삽입 불가 → 플랫폼 제공 기능 사용 코드 적용 불가
직접 만든 HTML </body> 직전 삽입 가장 안정적
✅ 마무리
Chrome / Edge → 대부분 기능 차단 가능
Firefox / Safari → 일부 기능 제한적
추천: 브라우저별 최적화 코드 사용 → UX 유지 + 최대한 차단
코드파일:
#right-clicking #우클릭방지 #우클방 #불펌방지 #카피방지
댓글
댓글 쓰기