여행준비하기/디지털노마드
[블로그] 우클릭 방지 + 코드블럭은 복사 가능하게 설정하는 방법
Carpet Rider
2025. 2. 9. 23:33
반응형
"우클릭 방지를 걸어놨는데, 코드 공유는 하고 싶다?"
마우스 오른쪽 클릭 방지를 설정하면 본문 내용이 보호되는 건 좋지만,
코드 공유를 하고 싶은 경우에는 정작 코드도 복사할 수 없어서 한땀한땀 받아적어야하는 불편함을 느꼈어요.😵💫
(사실 저는 받아적지 않고 캡쳐해서 chatGPT에게 받아적어 달라고 합니다. 하지만 귀찮죠)
코드를 쉽게 가져갈 수 있도록 배려하면서도 본문 보호 하는 방법을 알려드릴게요. 👇
만약 공유할 코드나 텍스트가 없다면
블로그 관리 > 좌측 메뉴에서 플러그인 > 마우스 오른쪽 클릭 방지를 적용하시면 됩니다.
💻 티스토리에서 우클릭 금지 + 코드 복사 가능하게 설정하는 방법
*우선 오른쪽 클릭 방지 플러그인을 사용하시면 코드가 제대로 작동되지 않습니다.
만약 플러그인을 사용하시고 계셨다면 해제하세요.
제공된 코드 안에 우클릭방지가 포함되어 있습니다.*
- 티스토리 관리자 페이지 접속
- '스킨 편집' → 'HTML 편집'으로 이동
- 아래 코드를 티스토리 스킨 편집에서 <body> 태그 위에 추가
- 저장 후 적용하면 끝! 🎉
<script>
document.addEventListener('DOMContentLoaded', function () {
// 🔹 코드블럭인지 확인하는 함수
function isCodeBlock(element) {
return element.closest('.codeblock, .html, .xml, .css, .javascript, .js, .json, .php, .python, .ruby, .java, .c, .cpp, .sql, .bash');
}
// 🔹 검색 입력창인지 확인하는 함수
function isSearchInput(element) {
return element.matches('input[type="search"], input[type="text"], textarea');
}
// 🔹 우클릭 방지 (검색창과 코드블럭에서는 허용)
document.addEventListener('contextmenu', function (e) {
if (!isCodeBlock(e.target) && !isSearchInput(e.target)) {
e.preventDefault();
}
});
// 🔹 텍스트 드래그 방지 (검색창과 코드블럭에서는 허용)
document.addEventListener('selectstart', function (e) {
if (!isCodeBlock(e.target) && !isSearchInput(e.target)) {
e.preventDefault();
}
});
// 🔹 복사(Ctrl + C) 방지 (검색창과 코드블럭에서는 허용)
document.addEventListener('copy', function (e) {
if (!isCodeBlock(e.target) && !isSearchInput(e.target)) {
e.preventDefault();
}
});
// 🔹 붙여넣기(Ctrl + V) 방지 (검색창과 코드블럭에서는 허용)
document.addEventListener('paste', function (e) {
if (!isCodeBlock(e.target) && !isSearchInput(e.target)) {
e.preventDefault();
}
});
// 🔹 Ctrl + C, Ctrl + V, Ctrl + X, Ctrl + A 차단 (검색창과 코드블럭에서는 허용)
document.addEventListener('keydown', function (e) {
if ((e.ctrlKey || e.metaKey) &&
(e.key === 'c' || e.key === 'v' || e.key === 'x' || e.key === 'a') &&
!isCodeBlock(e.target) && !isSearchInput(e.target)) {
e.preventDefault();
}
});
// 🔹 마우스 드래그 차단 (검색창과 코드블럭에서는 허용)
document.addEventListener('mousedown', function (e) {
if (!isCodeBlock(e.target) && !isSearchInput(e.target)) {
e.preventDefault();
}
});
// 🔹 모바일에서 길게 눌러 복사 방지 (검색창과 코드블럭에서는 허용)
document.addEventListener('touchstart', function (e) {
if (!isCodeBlock(e.target) && !isSearchInput(e.target)) {
e.preventDefault();
}
});
});
</script>
📌 이 코드가 하는 일
✓ 본문은 우클릭, 드래그, 복사, 붙여넣기 불가능!
✓ 하지만 .code-block 내부에서는 모든 기능 가능!
✓ 모바일에서도 길게 눌러 복사하는 것 방지!
즉, 글 본문은 보호하면서도, 코드 블록만 자유롭게 복사할 수 있게 설정했습니다.
이제 블로그에 코드 공유해도 독자들이 편하게 복사할 수 있어요. 🚀
반응형