티스토리 마우스 오른쪽 클릭 방지 설정하기(2) HTML/CSS 편집
- Web/티스토리
- 2017. 7. 12. 18:37
티스토리 포스팅을 작성할때 이미지를 첨부하는 경우가 많이 있습니다. 쉽게 구하는 이미지를 첨부 할 때도 있겠지만 시간을 들여서 제작한 이미지를 첨부 할 때도 있습니다.
힘들게 작성한 포스팅에서 마우스 오른쪽 클릭을 막는 방법을 포스팅 하도록 하겠습니다. 마우스 오른쪽 클릭을 막아도 해제해서 불펌을 하는 사람들도 있겠지만 방지를 해놓지 않는것 보다는 나으니까요. 마우스 오른쪽 클릭 방지를 설정하는 방법은 두가지 방법이 있습니다. 이번 포스팅에서는 HTML./CSS 편집을 통해 마우스 오른쪽 클릭을 방지하는 방법을 설명합니다. 다른 방법은 아래 포스팅으로 확인해 주세요.
[WEB 라이프/티스토리] - 티스토리 마우스 오른쪽 클릭 방지 설정하기(1) 플러그인 설정
마우스 오른쪽 클릭을 막는 이유
시간들여서 힘들게 제작한 이미지나 인터넷에서 쉽게 구하지 못하는 이미지를 포스팅에 첨부를 하였지만 마우스 오른쪽 클릭 한번에 저장을 해서 비슷한 포스팅을 작성하면서 저장한 이미지를 사용한다면 힘들게 제작한 사람은 정말 허탈감이 듭니다.
위에 이미지는 힘들게 제작한 이미지가 아닙니다. 인터넷에서 쉽게 구하지 못하는 이미지도 아닙니다. 그냥 설명을 하기 위한 중국 모바일게임 구체세계 로딩 이미지입니다.
마우스 오른쪽 클릭 막는 방법
HTML/CSS 편집에서 코드를 추가해서 마우스 오른쪽 클릭 방지를 설정할 수 있습니다. 티스토리 관리로 이동을 해주세요.
꾸미기 항목에서 HTML/CSS 편집을 클릭해주세요.
HTML에서 body를 검색해주세요. <body> 코드에 추가를 해주세요. 입력해야 하는 코드는 텍스트파일로 첨부를 해놓겠습니다.
마우스오른쪽클릭방지코드.txt<body>에 작성한 코드는 oncontextmenu, onselectstart, ondragstart 이렇게 3가지가 입력이 되어 있습니다.
oncontextmenu 이 코드는 마우스 오른쪽 클릭을 설정하는 코드입니다.
onselectstart 이 코드는 텍스트에서 마우스를 드래그해 텍스트를 선택하는걸 설정하는 코드입니다.
ondragstart 이 코드는 이미지에 마우스를 대고 왼쪽을 누른 상태에서 이동할때 이미지를 드래그 하는걸 설정하는 코드입니다.
3가지 코드 모두 return false를 해주면 되나
보통 텍스트와 이미지를 보호하시려면 3가지 모두 return false를 해주시면 됩니다. 그런데 이미지만 보호하고 텍스트는 복사를 허용하고 싶으실때에는 oncontextmenu, ondragstart이렇게 2개의 코드만 return false를 입력하시고 onselectstart는 return true로 입력을 해주시면 됩니다. 반대로 텍스트만 보호하고 이미지는 복사나 저장을 허용하실때에는 반대로 onselectstart만 return false를 입력해주시고 나머지 2개는 return true로 입력을 해주시면 됩니다.
티스토리 플러그인 설정과 다른점
플러그인 설정은 쉽게 버튼클릭 한번이면 마우스 오른쪽 클릭 방지와 텍스트 드래그 방지까지 되지만 따로 한가지만 해제 하는건 불가능합니다. HTML/CSS 편집은 코드를 붙여넣어줘야 해서 불편하지만 마우스 오른쪽 클릭 방지와 텍스트 드래그 방지를 중에 한가지만 따로 해제가 가능합니다. 가장 중요한 차이점은 플러그인 설정은 작성자는 마우스 오른쪽 클릭과 텍스트 드래그 방지가 해당이 되지 않고 사용이 가능하지만 HTML/CSS 편집으로 설정을 했을때에는 작성자도 마우스 오른쪽 클릭과 텍스트 드래그를 사용하지 못합니다.
