오늘은 구글 블로그에서 마우스 우클릭과 드래그를 방지하는 코드를 공유해볼까 합니다.
이런 코드를 공유하는 이유는 블로그스팟에서는 기본적인 설정에 복사방지 기능이 없기때문에, 이렇게 따로 코드를 넣어줘서 작동시키는 겁니다.
티스토리나 워드프레스에서도 작동하는지는 제가 해당 사이트 블로그를 운영하는게 아니라서 확인하지는 못했지만. html코드와 css코드를 복사해서 입력해주는 방식이라 작동할거라는 제생각입니다.
현재 제 블로그에서는 두 코드를 적용해서 마우스 우클릭과 드래그 방지가 적용된 상태이구요.
물론 요즘에는 개발자 도구라던가, 확장프로그램 등을 이용해서 본문을 복사하는
방법을 원천적으로 막을 방법은 없지만, 블로그 접속시 일차적으로 해당 기능을 막아서 보호하는 정도로는 유용합니다.
마우스 우클릭 방지 코드
다음 코드를 복사해서 블로그 설정 > 테마 > html 편집의 </body> 앞에 넣어주면 됩니다.
function preventContextMenu(e) {
e.preventDefault();
return false;
}
document.addEventListener(‘contextmenu’, preventContextMenu);
</script>
블로그 html 코드를 넣거나 변경 할 때는 항상 백업을 미리 해두는걸 권장합니다.
지금처럼 간단한 코드는 상관없지만 복잡한 코드를 넣거나 삭제시 블로그 스킨이
작동을 안 할수도 있거든요.
번거로운 일은 사전에 예방하는 겁니다.
위에 이미지처럼 </body> 위에 복사한 코드를 붙여넣기 했습니다.
저장 버튼을 누르면 적용되구요, 저장하면서 해당 코드의 특수문자 같은 경우는 ' 처럼 html 엔티티로, 특수문자를 안전하게 표현하기 위해 사용되는 문자로 변형되어 표시가 됩니다.
마우스 드래그 방지 코드
이번에는 드래그를 방지하는 코드입니다.
다음 코드를 복사해서 설정 > 테마 > 맞춤설정 > 고급 > CSS추가 항목에 붙여넣기 합니다.
body {
user-select: none;
-webkit-user-select: none;
}
역시 코드를 넣어준 뒤에 저장을 눌러야 적용이 되고요.
다음과 같이 넣어줬습니다.
코드를 두 개 다 적용한 뒤에 블로그에서 확인해보시면 마우스 우클릭과 드래그가 막힌걸 볼 수 있습니다. 유용하게 쓰시기 바랍니다.