이미지 드래그 & 오른쪽 마우스 막는 방법

이미지 드래그 & 오른쪽 마우스

블로그나 기타 웹사이트를 운영하다 보면, 이미지를 블로그에 업로드하는 경우가 빈번하게 일어납니다. 이때, 블로그에 올려둔 img 파일의 오른쪽 마우스와 드래그를 막는 방법을 소개해드리고자 합니다.

 

방법은 매우 간단합니다. 단순히 아래 코드를 CSS파일에 적용하면 되는데, 티스토리의 경우에는 HTML 스킨 편집 CSS탭에 코드를 추가하면 됩니다.

(티스토리) 스킨 편집 기초 상식

만약 이미지를 선택할 수 없게 하고 싶다면 아래 코드를 적용하면 됩니다.

img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

 

이미지의 드래그를 막으시려면 아래 코드를 적용하시면 됩니다.

img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

이미지 선택과 드래그를 모두 막으시려면 모든 속성을 추가하시면 됩니다.

img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

img는 사이트에 있는 모든 이미지를 뜻하며, 만약 선택적으로 img 클래스를 지정해주신다면 모든 이미지가 아닌 선택 지정한 이미지만 적용이 됩니다.

---

오늘은 이렇게 블로그에 올려둔 img 파일의 오른쪽 마우스와 드래그를 막는 방법에 대해 알아보았습니다.

 

읽어주셔서 감사합니다. 🤟