티스토리 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; 을 추가만 해주면 됩니다. 기존 명령어와 구분은 세미콜론 ; 을 사용하시면 되구요. 마우스 포인터를 사용하는 이벤트를 없앤다는 뜻입니다. 

티스토리 이미지 복사 금지 설정

아래 코드를 복사하셔서 사용하시면 됩니다. 

/*본문 이미지 라운드효과 171012 */
.area_view img {border-radius:10px; pointer-events: none;}

4. 변경 전후 비교

코드 수정 전에는 이미지에 마우스 오른쪽 클릭을 하면 아래와 같이 이미지를 복사하거나 다운받을수 있었습니다. 

변경전 이미지 복사가능

여기에 pointer-events : none; 코드를 추가하니 아래와 같이 더이상 이미지 관련 항목이 안나옵니다. 정상적으로 작동합니다. 간단한 코드 한줄 추가로 쉽게 이미지 복사 금지 설정 완료했습니다.

변경후 이미지복사 불가능

Epilogue

며칠전에도 제 이미지와 글을 불펌한 네이버 블로그를 신고하고 삭제요청했었네요. 아 불펌러들 정말 짜증납니다. 시간과 정성을 들여 만든 이미지나 글들을 너무나 쉽게 퍼가는 상황이 화도 나고 안타깝네요. 이렇게 불펌방지 코드를 아무리 해도 맘먹고 퍼가는 사람들은 막을 수가 없습니다. 올바른 인터넷 문화가 정착되기를 바라는 수밖에요. 

마지막으로 이미지복사 금지 방법에 대해 피드백을 해주신 갓쇼님 감사합니다.