티스토리 뷰

오늘도 개발자/HTML5+CSS3

[HTML/CSS] 텍스트 마우스 드래그 방지 모든 브라우저 호환용

오늘도공대생 2019. 1. 5. 05:17

웹 제작 시 메뉴부분을 이미지가 아닌 텍스트로 처리하거나 일부 텍스트를 이미지처럼 두어 마우스 드래그를 막을 필요가 종종 있습니다. 


이런 경우 유용하게 쓰이는 CSS로서, 보통 따로 class를 선언해두고 필요 시 해당 태그에 class를 달아주는 방법을 주로 사용하죠.


바로 아래 경우처럼요.



<head>
<style type="text/css">
.no-drag {-ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select:none;}
</style>
</head>
<body>
   <p class="no-drag">드래그를 할 수 없습니다.</p>
   <p>드래그를 할 수 있습니다.</p>
</body>



아래는 결과 텍스트입니다.

no-drag class / onselectstart 를 사용한 결과와 아무것도 사용하지 않은 결과입니다.



------------------------------

>>드래그를 할 수 없습니다. [no-drag 사용]

>>드래그를 할 수 없습니다. [onselectstart 사용]


>>드래그를 할 수 있습니다.

------------------------------


위의 'no-drag' CSS는 모든 웹에서 호환됩니다. 


p.s1 : 익스플로러에서는 해당 텍스트만 드래그 시 드래그가 되지 않지만, 

            드래그방지 범위 밖인 위 혹은 아래에서 드래그 시 드래그가 가능합니다.

페이지 전체를 막으시려면 body에 선언하시길 바랍니다.



p.s2 : 타 드래그 방지 방법인 onselectstart="return false" 를 사용하여도 

p.s1 에서 나타난 현상이 익스플로러 뿐만 아니라 크롬과 사파리에서도 똑같이 발생되더군요.

편한 것으로 사용하시면 될 것 같습니다.



출처: http://ingryong.tistory.com/4 [잉룡의 블로그]

저작자표시 비영리 변경금지

'오늘도 개발자 > HTML5+CSS3' 카테고리의 다른 글

[HTML/CSS] 크롬에서 input에 생기는 파란색 테두리 없애는 방법  (0) 2019.01.05
[HTML/CSS] 박스(BOX)에 그림자 적용하기 box-shadow  (0) 2019.01.05
귀여운 로그인 폼  (0) 2018.09.01
[HTML5+CSS3] width 초과 막기  (0) 2018.09.01
[CSS] 10 Stunning CSS 3D Effect You Must See  (0) 2018.07.23
댓글