[CSS] 텍스트 드래그 방지 및 허용 방법

IT관련 글을 쓰다보니 해당 구문을 손쉽게 드래그해서 복사할 수 있게끔하는 방법이 필요해졌다.

게으른주부는 티스토리 플러그인에서 우클릭방지 플러그인을 사용하고 있었는데, 가장 큰 문제점이 원하는 부분의 텍스트를 드래그 할 수 있도록 해주질 못한다는 것이었다.

css로 막아둘지 스크립트로 막아둘지 곰곰히 생각하던 게으른주부는 그냥 손쉽게 css만으로 body 안에 있는 모든 텍스트는 드래그를 못하게 막아두되 필요한 부분만 드래그를 허용하게끔 하자는 생각에 간단하게 css 구문 두개를 만들어 넣었다.

---

이 작업을 하기에 앞서 먼저 티스토리 플러그인인 드래그 및 우클릭을 방지해주는 마우스 오른쪽 클릭 방지를 해제 해줘야한다.

 

마우스 오른쪽 클릭 방지를 눌러 해제시켜준다.

사용중인 플러그인은 상단으로 배치되기 때문에 찾기 쉬울 것이다.

 

해제 후 관리자모드로 들어가 좌측메뉴의 [꾸미기]-[스킨편집]을 눌러준다.

 

 

스킨 편집 페이지에서 우측상단에 있는 html편집 버튼을 눌러 html 편집페이지로 들어간다.

 

 

우측 편집창에서 css 편집모드로 바꿔준다.

 

 

---

게으른주부는 body에 user-select :none 구문을 넣어주고 원활한 크로스브라우징을 위해 접두어(vendor prefix)를 사용했다. 

 

접두어(vendor prefix)는 css3의 웹표준이 아직 정해져 있지않아 각 브러우저마다 동일한 css 명령어를 다르게 해석하거나 지원하는 방법이 틀릴 때가 있는데 이러한 이슈를 잡기 위해 접두어(vendor prefix)를 사용하여 각각의 브라우저에서 동일한 결과값이 나오도록 해준다.

접두어	브라우저
-webkit-	크롬, 사파리
-moz-	파이어폭스
-ms-	익스플로러
-o-	오페라

앞서 말했듯이 게으른주부는 body에 user-seuser-select: none를 추가해주었다.

 

body {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

 

그리고 부분 드래그가 용이하도록 드래그를 허용하는 class를 추가하여 원하는 텍스트가 원활히 드래그 될 수 있도록 해준다. 게으른주부는 알아보기 쉽도록 opendrag라는 class명을 추가해 드래그 방지를 해제해주었다.

 

.opendrag {
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
}

※ 위 두 태그는 드래그 복사가 가능하니 필요하신 분들은 복사해서 자신에게 맞게 변경해 사용하시면 된다.

 

html 편집에서 css에 해당 class를 삽입해 놓았다면 에디터에서 글을 쓸때 상단에 있는 기본모드를 html모드로 바꾸어 드래그를 허용할 텍스트 태그에 해당 class만 삽입해주면 아주 간단하게 부분 드래그를 허용할 수 있다.