공들여 직접 작성한 글이 누군가에 의해 복제되고 있나요? 이것은 직접 작성한 글을 보호하는 방법의 하나입니다. 파훼 방법이 있어서 완벽히 보호할 수 없지만, 작은 장치라고 생각하고 적용을 해봅시다. 방법은 아주 간단합니다. 스타일 시트에 몇 줄의 CSS 코드를 추가하기만 하면 됩니다.
드래그 선택 및 복사 방지 방법
스타일 시트에 다음 CSS 코드를 붙여넣습니다.
body {
-webkit-touch-callout: none; /* Safari Touch */
-webkit-user-select: none; /* Webkit */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Edge*/
user-select: none; /* Future-proof*/
}
1. 블로그스팟에 적용하는 방법
1단계: blogger 계정에 접속합니다.
2단계: blogger 대시보드에서 테마 메뉴로 이동합니다.
3단계: 맞춤설정 버튼을 클릭합니다.
4단계: 고급 - CSS 추가로 이동하여 위 코드를 붙여넣습니다.
끝! 이게 다입니다! 블로그의 모든 영역은 이제 선택 및 드래그가 금지됩니다. 그러나 특정 영역은 복사할 수 있어야 합니다. 예를 들어, 코드를 공유하는 경우 복사 방지되어 있으면 방문자는 불편하고 불친절하게 느낄 것입니다.
2. pre, code 선택자만 복사 가능하게 하기
코드 영역을 드래그 복사할 수 있도록 해봅시다. 스타일 시트에 아래↓ 코드를 추가합니다.
pre, code {
-webkit-touch-callout: text;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
끝! 코드 박스와 인라인 코드를 드래그 선택 ‧ 복사할 수 있습니다. 반대로 특정 선택자만 선택 금지하려면 아래↓ 예시와 같이 작성하면 됩니다.
/* 이미지만 선택 금지 */
img {
-webkit-touch-callout: none; /* Safari Touch */
-webkit-user-select: none; /* Webkit */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Edge*/
user-select: none; /* Future-proof*/
}
앞서 서론에서 언급한 것처럼 마우스 오른쪽 버튼 금지, 선택 금지를 파훼할 방법은 여러 가지가 있습니다. 완벽하게 방지하는 방법은 없어요. 그냥 최소한의 보호장치라고 생각하면 될 것 같네요!
보통 많은 블로거들이 콘텐츠 보호를 위해 적용하지만, 방어하기 위한 것이 아닌 경우도 있어요. 모바일 환경에서는 길게 터치할 때 뜨는 팝업이 방해가 될 수 있지만 선택을 비활성화 하면 편하게 글을 읽을 수 있습니다.