이미지 보안을 위하여 드래그 및 선택(우클릭)을 막는 경우가 있다.
방법은 다음과 같이 CSS에 적용시키면 된다.
드래그 막기
img {
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
}
선택 막기
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
이미지 선택, 드래그 막기
//이미지 선택,드래그 막기
-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 파일의 오른쪽 마우스와 드래
seons-dev.tistory.com
'HTML & CSS' 카테고리의 다른 글
[HTML] 카카오톡 오픈그래프(og) 이미지 안 뜨는 오류 해결 (0) | 2024.08.30 |
---|---|
[CSS] width: fit-content; 적용이 안되는 이슈 해결(feat:IOS) (1) | 2023.12.04 |
[css] background image hover시 확대하기 (0) | 2023.07.28 |
[CSS] ellipsis('...') 나타내는 방법 (0) | 2023.07.26 |
[css] SVG 사용 방법 (0) | 2023.07.20 |