블로그 마우스 우클릭, 드래그 방지하는 방법

IT / / 2020. 8. 2. 00:02
반응형

 

 

Introduction

인터넷 블로그, 사이트를 운영하다 보면 자신이 작성했던 글들이 다른 사이트에서 토씨 하나 틀리지 않고 그대로 발견하셨던 경험을 한 번쯤은 해보셨을 겁니다. 본인에게 허락을 맡고 참고하는 수준으로 글을 인용하였다면 모르겠지만 아무런 말없이 그대로 복사해가는 사람이 은근히 많습니다. 그리고 자신의 콘텐츠를 그대로 복사해서 수익을 발생시키고 있다면 허탈하고 화가 나곤 하는데요(블로그의 경우에는 해당 블로그를 운영하는 사이트에 저작권 침해 관련으로 신고를 하여 해결할 수 있습니다.) 이런 상황을 겪지 않기 위해 최소한 마우스 우클릭, 드래그를 할 수 없도록 세팅을 해놓아야 합니다. 저 또한 제가 작성했던 글들이 무단으로 복사되었던 경험이 있어 블로그 스킨을 변경하고 나면 마우스 드래그, 우클릭을 방지하는 태그를 먼저 설정해 놓습니다. 이번에는 블로그에 작성한 콘텐츠의 무단복사를 방지하는 html 태그와 body 태그에 대하여 알아보도록 하겠습니다.

 

 

마우스 우클릭, 드래그 방지 태그

마우스 우클릭, 드래그를 방지하려면 태그를 2개 적용시켜야 하며 각각 삽입해야 하는 위치가 다릅니다.

<script type="text/javascript">
  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
  }
 </script>
<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false">

마우스 우클릭, 드래그를 방지하는 태그는 위와 같습니다. 현재 저의 블로그는 마우스 드래그가 방지되어 있기 때문에 메모장으로 태그를 작성하여 첨부하였으니 필요하시다면 첨부된 메모장을 참고하시길 바랍니다.

 

마우스 우클릭, 드래그 방지 태그.txt
0.00MB

위의 html 태그를 이제 블로그에 적용시켜야 합니다. 파란색의 텍스트/자바스크립트 html 태그는 <head>와 </head> 사이에 삽입해야 하며, 하늘색의 온컨텍스트메뉴 html 태그는 <body>와 </body> 사이에 삽입해야 합니다. 계속해서 html 태그를 적용하는 방법에 대하여 알아보도록 하겠습니다.

 

 

마우스 우클릭, 드래그 방지 태그 삽입하기

html 태그를 적용하기 위해서는 먼저 블로그 관리로 이동한 뒤, html을 편집할 수 있는 설정 관련 페이지로 이동해야 합니다. 티스토리 블로그의 경우에는 환경설정으로 이동한 뒤, 꾸미기로 이동하여 html 편집으로 이동하면 됩니다. html 편집으로 이동하고 편집을 클릭하면 자신의 블로그를 이루고 있는 html 태그들이 있습니다. 먼저 <head> 라인을 찾은 뒤, 위의 파란색의 텍스트/자바스크립트 html 태그를 </head> 라인보다 위쪽으로 적당한 위치에 삽입시키면 됩니다. 참고로 <head> 라인은 처음 부분에 있으므로 금방 찾으실 수 있습니다.

 

</head>위에 텍스트/자바스크립트 html 태그를 삽입한 이미지

저는 추가한 html 태그를 편하게 관리하기 위하여 위와 같이 </head> 바로 위에 텍스트/자바스크립트 html 태그를 삽입하였습니다. 그리고 하늘색의 온컨텍스트메뉴 html 태그를 삽입하기 위해 <body>라인을 찾아야 합니다. 보통 </head>라인 바로 아래쪽에 <body>라인이 있기때문에 찾기 쉽습니다.

 

<body>라인 바로 아래쪽에 온컨텍스트메뉴 html 태그를 삽입한 이미지

온컨텍스트메뉴 html은 <body>와 </body> 사이에 적당한 위치에 삽입시키면 됩니다. 저는 html 태그를 편하게 관리하기 위하여 <body> 라인 바로 아래쪽에 html 태그를 삽입하였습니다. 티스토리 블로그의 경우에는 위의 두 개의 html 태그를 적절한 위치에 삽입을 시켰다면 꼭 적용을 클릭하여 변경된 내용을 저장하시길 바랍니다.

 

 

마우스 우클릭, 드래그 방지 태그를 적용한 결과

위의 마우스 우클릭, 드래그 방지태그를 적용하면 아래와 같이 더 이상 자신의 블로그에서는 마우스 드래그, 우클릭을 할 수 없게 됩니다. (글 작성, 수정 시에는 마우스 드래그, 우클릭이 가능하니 참고하시길 바랍니다.)

html 태그가 적용되어 마우스 우클릭, 드래그가 방지되었다.

이렇게 태그를 적용하면 자신의 콘텐츠가 무단복사되는 현상을 줄일 수 있습니다. 그리고 티스토리 블로그에서는 마우스 우클릭 방지 플러그인이 있기 때문에 html 태그를 적용하시는 것이 어렵다면 플러그인을 이용하는 방법도 있습니다.

 

 

티스토리 블로그 마우스 우클릭 방지 플러그인

티스토리 블로그를 운영하고 계신다면 플러그인 중 마우스 오른쪽 클릭 방지 플러그인이 있습니다. 플러그인의 경우에는 클릭하여 적용하기만 하면 간단하게 적용이 되니 html 태그를 직접 적용하는 것이 어렵다면 이 방법을 사용해 보시길 바랍니다. 플러그인을 적용하기 위해서는 블로그 환경설정으로 진입하시고 플러그인을 클릭하여 플러그인 페이지로 이동하여 마우스 오른쪽 클릭 방지 플러그인을 적용시키면 됩니다.

 

티스토리 블로그에는 마우스 오른쪽 클릭 방지 플로그인이 있어 간단하게 설정이 가능하다.

이 플러그인을 적용시키면 마우스 우클릭이 방지되어 자신의 이미지를 무단 복사로부터 지킬 수 있습니다. 하지만 마우스 드래그는 여전히 가능하기 때문에 html 태그를 직접 적용하기 어렵다면 차선책으로 이 방법을 사용해 보시길 바랍니다. 아무것도 설정하지 않은 것보다는 낫습니다.

 

 

마무리

이번에는 블로그에 마우스 우클릭, 드래그를 방지하는 방법에 대하여 알아보았습니다. 만약 무단복제에 대하여 아무런 대비책을 세우지 않으셨다면 이번 기회에 한번 적용시켜 보시길 바랍니다. html 태그를 그냥 적절한 위치에 삽입시키면 되기 때문에 금방 적용시킬 수 있습니다. 그리고 티스토리 블로그의 경우에는 플러그인으로 마우스 오른쪽 클릭 방지가 가능하므로, 자신이 노력하여 작성한 소중한 글들을 무단 복제로부터 지키시길 바랍니다.

반응형
  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기