[HTML/CSS] CSS만 사용해서 텍스트 드래그 방지하는 방법

드래그 방지의 필요성?

  많은 분께서 드래그 방지 하면 불펌방지를 떠올리실 거라 생각합니다. 하지만, 사실상 불펌방지는 드래그 방지만으로 막을 수 있는 것이 아닐 뿐더러, 애초에 불펌방지라는 말 자체가 이상하기도 합니다. 누구나 볼 수 있으며 정보 공유를 목적으로 하는 블로그에서 불펌방지라니...

  아무튼, 제가 이 글을 쓰는 목적은 쓸데없는 드래그로 의도한 디자인이 망쳐지는 경우를 방지하기 위함입니다. 예를 들어, 사이드메뉴를 예쁘게 만들어 색상 조합도 완벽하게 디자인해놨는데 메뉴를 클릭하다 실수로 드래그라도 하면 영 보기 좋지 않은 색상으로 드래그된 채 색상 조합이 다 망쳐지게 되죠. 바로 이럴 때 드래그 방지를 하면 됩니다.

드래그 방지 방법. CSS만으로!

  매-우 간단합니다. user-select 혹은 touch-callout 프로퍼티를 none으로 설정하면 됩니다. 

        -webkit-touch-callout: none;
        user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -webkit-user-select: none;

  해당 CSS가 적용된 엘리먼트는 이제 드래그를 할 수 없게 됩니다. 참 쉽죠?