블로그,홈페이지 우클릭/드래그 금지방법 소스 와 크롬브라우저에서 우클릭 해제방법


<body contextmenu="return false" ondragstart="return false" onselectstart="return false">
</body>

위의 내용을 입력하면, 특정영역에 대해서 우클릭, 드래그 선택을 금지하는 기능으로, 1가지 혹은 2가지만 적용하여 사용할 수도 있고 body  아래에 3가지 전부 혼합하여 사용하는 것도 가능하다. 
  

contextmenu="return false"       마우스 오른 클릭 금지
ondragstart="return false"         마우스 드래그 금지
onselectstart="return false"       선택 금지


코드 사용 후 </body> 를 해서 닫아주는 것도 잊지말자

<div id="mouse_no" oncontextmenu="return false" ondragstart="return false" onselectstart="return false">
이 안에 내용을 입력해 줍니다. 텍스트, 그림, 표, 무엇이든 가능합니다. 
</div>

만약 표 <table class="~~ 앞에 위의 코드를 입력해주고, </table> 뒤에 </div >로 닫아준다면 표/table 이 오른클릭/드래그/선택 하는 것 모든 기능이 금지된다.

간편한 예시를 위해서 아래에 첨부해 보았다.






 

 

 

 





본문의 텍스트에서는 글 입력이 되지만, 위의 표에서는 마우스 드래그 및 우클릭이 불가능한 것을 확인이 가능하다



굳이 블로그/홈페이지를 전체적으로 사용금지 하는 것보다는 다른사람이 해당 부분을 퍼가기 싫다.. 라고 생각하는 부분에 대해서만 DIV 해주는것도 괜찮은 방법이라 생각한다.


위의 소스를 홈페이지 전체에 입력하고 싶다면 홈페이지의 HTML / CSS 에서 설정해줘도 된다.


사실 HTML 이다보니 html을 지원하는 블로그 및 게시판에서 글을 작성할 때도 사용가능하지만

네이버 블로그 html 소스/태그의 일부기능이 제한되기 때문에 
네이버 블로그 유저의 경우 네이버 블로그 기능에서 지원해주는 기능을 사용하여 사용 or 금지를 조절해 주는 것이 가장 좋다. 



(대표적으로 iframe 의 경우 여러사이트에서 태그가 씹힌다...
아이러니 하게도 구글에서는 사진, 스트리트 뷰, 구글 로드뷰 사용에 iframe을 사용중이다. 








오른쪽 금지 를 한 블로그 나 홈페이지, 커뮤니티로 인해서 마음에 드는 사지이나, 저작권이 보호되는 사진에 대해서는 아쉬운 면이 많다. 그렇기 때문에 여러가지 툴바가 지원되는 IE 에서는 알툴바를 이용해서 특정사이트의 오른쪽 클릭 및 드래그 기능을 풀 수가 있다.

(IE를 사용한지 오래되어 스크린샷 첨부가 없는 점 양해바랍니다.)


그런데 위의 소스들을 보면 알겠지만, 자바스크립트로 이루어져 있기 때문에 브라우저에서 자바 스크립트 기능을 종료하면 그딴거... 쉽게 무시할 수가 있다. 
물론 동시에 게시물 작성자의 저작권 역시 쉽게 무시되는 점... 고소미를 당할 수 있으니 나쁜 용도로만 사용하지 말자.



특히 크롬 브라우저에서는 별도의 확장 프로그램 없이 자바스크립트 기능을 종료할 수 있다


크롬브라우저에서 확장프로그램을 사용하지 않은, 우클릭 뚫는 방법

1.  주소창에 chrome://settings/content   을 입력한다.
2.  모든사이트에서 자바스크립트 실행 허용 안함 을 체크해 준 뒤 완료 를 눌러준다


 


예외 사이트도 설정이 가능하다.





3. 적용하긴 위해선 해당 사이트에서 F5 를 눌러준다.


참고로 chrome://settings/content 는 북마크로도 저장이 가능하기에 자주 사용할 일이 있다면 북마크로 등록한 뒤 사용하는 것도 힌트 포인트.


크롬을 사용하시는 분들의 경우 아래의 링크를 통해, 플러그인을 받은 뒤 사용해 주시면 쉽게 오른클릭, 드래그 기능을 자바스크립트 사용 종료 없이 사용이 가능하다는 장점이 있다. 플러그 인을 다운 받을때는 사람많고 평이 좋은걸 사용하자


https://chrome.google.com/webstore/search/right%20click?utm_source=chrome-ntp-icon&_category=extensions




반응형