생활정보 연구소
티스토리 html/CSS 이미지 복사 금지 설정 방법 본문
전에 티스토리 복사 금지 설정을 하고 원하는 부분만 복사를 하는 방법을 공유했습니다. 문제는 텍스트는 잘 되는데 이미지는 복사 및 다운로드가 가능하네요ㅠ. 그래서 열심히 구글링한 결과 CCS만 간단히 수정하여 이미지 복사 금지하는 법도 알아냈습니다.
2018/12/25 - [티스토리] - 티스토리 블로그 복사금지 설정 및 특정영역 복사허용 방법
티스토리에서 제공하는 오른쪽클릭 방지 플러그인으로도 텍스트나 이미지의 불펌금지 설정을 할 수 있습니다. 하지만 별도의 설정이 더 필요하다면 저처럼 html/CSS 부분을 건드려야 합니다. 현재 제 블로그는 텍스트 및 이미지 복사가 안되고, 텍스트의 경우 원하는 부분만 부분적으로 복사가 가능한 블로그입니다. 딱 제가 원하는 상태로 세팅이 된거 같네요. 자 그럼 이미지 복사 금지 설정하는 방법 자세히 알아보겠습니다. 생각보다 쉬워요.
1. 티스토리 area_view img 검색
티스토리 관리페이지에서 꾸미기→스킨변경→스킨편집→html편집 으로 들어갑니다. CSS탭으로 가셔서 키보드 Ctrl+G
를 누르고 area_view img
라고 검색을 합니다.
티스토리 area view img 검색
2. area_view img
.area_view img는 티스토리 본문 이미지에 대한 스타일 설정이 들어가는 곳입니다. 스킨에 따라 area_view img가 없을 수도 있습니다. 그럴땐 .area_view {...} 아래에 코드를 만들어 주면 됩니다.
저는 이미지 가장자리에 라운드효과를 주는 코드가 이미 있네요.
티스토리 본문 이미지 관련 코드
3. pointer-events 추가
.area_view img 에 pointer-events : none;
을 추가만 해주면 됩니다. 기존 명령어와 구분은 세미콜론 ; 을 사용하시면 되구요. 마우스 포인터를 사용하는 이벤트를 없앤다는 뜻입니다.
티스토리 이미지 복사 금지 설정
아래 코드를 복사하셔서 사용하시면 됩니다.
12 /*본문 이미지 라운드효과 171012 */.area_view img {border-radius:10px; pointer-events: none;} cs
4. 변경 전후 비교
코드 수정 전에는 이미지에 마우스 오른쪽 클릭을 하면 아래와 같이 이미지를 복사하거나 다운받을수 있었습니다.
변경전 이미지 복사가능
여기에 pointer-events : none; 코드를 추가하니 아래와 같이 더이상 이미지 관련 항목이 안나옵니다. 정상적으로 작동합니다. 간단한 코드 한줄 추가로 쉽게 이미지 복사 금지 설정 완료했습니다.
변경후 이미지복사 불가능
Epilogue
며칠전에도 제 이미지와 글을 불펌한 네이버 블로그를 신고하고 삭제요청했었네요. 아 불펌러들 정말 짜증납니다. 시간과 정성을 들여 만든 이미지나 글들을 너무나 쉽게 퍼가는 상황이 화도 나고 안타깝네요. 이렇게 불펌방지 코드를 아무리 해도 맘먹고 퍼가는 사람들은 막을 수가 없습니다. 올바른 인터넷 문화가 정착되기를 바라는 수밖에요.
마지막으로 이미지복사 금지 방법에 대해 피드백을 해주신 갓쇼님 감사합니다.
정성글에는 공감❤ 댓글📝 팍팍!
-
철이쓰 2019.01.19 17:35 신고 오호 이미지까지ㅎㅎ정보 감사합니다
-
타리 2020.12.13 23:46 신고 감사합니다. code는 복사 가능하게 하는 방법 알려주신 것과 같이 적용하니 좋네요
다만 예전 구에디터 작성글의 이미지는 우클릭 복사가 되고
최신 에디터 작성글 이미지에만 적용이 되네요
왜그런진 모르겠습니다. 거기까진 포기... ㅠ -
타리 2020.12.14 22:46 신고 구에디터 이미지는 css에서 별도 위치에 있네요
각각 바꿔서 해결했습니다 감사해요! -
GAYANIM 2020.12.31 18:40 신고 엠원스킨을 사용하는데요.
CSS에 보니 전혀 문구가 없어요.
스킨이 문제인가싶지만 변경하지않고
이미지클릭안되게 하고싶습니다.
해결법이 있을까요?