개요
웹 페이지에서 이미지가 사용자에 의해 임의로 드래그되거나 선택(하이라이트)되는 것을 막고 싶은 경우가 있습니다. JavaScript를 작성하지 않아도 CSS의 user-select 속성과 브라우저별 접두사 속성만으로 이를 간단하게 해결할 수 있습니다.
아래 코드 스니펫을 이미지에 적용하면 드래그와 선택이 모두 차단됩니다.
img {
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}user-select 속성의 원리
텍스트나 이미지를 더블클릭하면 해당 요소가 하이라이트(선택)됩니다. user-select 속성은 이러한 선택 동작을 제어하는 데 사용되며, 값을 none으로 설정하면 이미지가 선택되지 않도록 할 수 있습니다.
또한 -webkit-user-drag와 user-drag 속성을 none으로 지정하면 이미지를 마우스로 끌어다 놓는 드래그 동작까지 방지할 수 있습니다. 크로스 브라우저 호환성을 위해 Firefox용 -moz-, Safari·Chrome용 -webkit-, 구버전 IE용 -ms- 접두사를 함께 사용하는 것이 좋습니다.
예제
아래 전체 코드를 실행하여 이미지가 선택되지 않도록 차단되는지 직접 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
img {
-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<img src = "https://www.tutorialspoint.com/images/python3.png" alt = "Python" width = "62" height = "62">
</body>
</html>참고 사항
user-select: none은 텍스트 요소에도 동일하게 적용할 수 있어, 복사를 방지하고 싶은 콘텐츠 영역에 활용할 수 있습니다. 다만 접근성과 사용자 경험을 해칠 수 있으므로 필요한 부분에만 선별적으로 적용하는 것이 바람직합니다.