티스토리 블로그를 본문영역만 드래그 할 수 있도록 설정하는 방법
이미 제 블로그를 드래그 해보셨다면 아시겠지만, 본문 영역과 댓글 영역을 제외한 나머지 영역에서는 드래그 할 수 없도록 막아 놨습니다. 미관상의 이유나 그 밖의 이유로 드래그를 할 수 없도록 하고 싶지만, 본문 영역은 방문자의 편의를 생각해 쉽게 복사해 갈 수 있도록 해놓은 것입니다. 특히 소스코드 같은 내용들을 블로그에서 공유하고자 한다면 드래그할 수 있도록 허용을 해야하겠죠. 그렇지 않으면 소스코드를 찾아온 방문자들이 금방 이탈을 해버릴테니까요.
사실 이미 티스토리 자체에 우클릭 방지 플러그인이 있습니다. 이 플러그인을 사용하면 드래그는 물론이고 우클릭도 금지시킬 수 있습니다. 하지만 어느정도 웹서핑 내공이 있다면, 브라우저를 '자바스크립트 사용 안 함'으로 설정하거나 개발자 모드를 띄우는 방법 등을 사용해서 얼마든지 블로그 내용을 복사해 갈 수 있기 때문에 우클릭 방지 플러그인이 그렇게 큰 효용이 있는 것 같지는 않습니다. 저도 이 플러그인을 사용했었지만, 죽어도 불펌을 해가고야 말겠다는 사람들은 어차피 무슨수를 써서라도 불펌해가기 때문에, 심지어 우클릭 불펌방지 해제하는 프로그램까지 사용해서, 굳이 정보를 찾아 들어온 방문자들에게 불편함을 주면서까지 우클릭방지 플러그인을 쓰고 싶지는 않았습니다. 어쩌면 사실 이 블로그에는 퍼갈만한 가치가 있는 내용이 별로 없기 때문인지도 모르겠네요. (^_ㅠ).
대단한 내용을 소개하려는 것도 아닌데 로딩이 조금 길었나요.
어쨌든, 실용적인 팁인지는 스스로도 의문스럽지만 굳이 그 방법을 한번 소개해보겠습니다..
먼저 블로그 전체영역에서 드래그를 할 수 없도록 하기 위해, 드래그 컨트롤과 관련된 CSS 속성인 user-select를 none으로 설정하여 style.css 파일에 아래 코드를 추가합니다.
위와 같은 내용을 style.css 에 적용하면 블로그 전체 영역에서 드래그를 할 수 없는 상태가 됩니다. 그리고 본문 영역에서는 드래그를 할 수 있도록 하기 위해 style.css 에서 본문 영역(대개는 .article 로 되어 있습니다.)을 찾아 아래의 CSS 코드를 추가합니다.
(보통은 본문 영역의 클래스가 .article 로 되어 있습니다만, 제 경우 본문 영역의 클래스를 .article-body 로 만들었습니다. 저 처럼 본문 영역의 클래스가 다른 분들은 확인해보시고 ".article" 이 부분을 사용자에게 맞도록 변경해야 합니다.)
자, 끝 입니다. 간단하죠?
이제 티스토리 자체 우클릭 방지 플러그인을 사용할 때에는 만끽하지 못했던 드래그의 자유로움을 만끽해 봅시다.
그리고 드래그를 할 수 있게 되었으니 CSS 선택자 ::selection 을 이용해 드래그 영역의 배경과 글자의 색깔도 바꾸어 봅시다.
참고로, 제 블로그에서 HTML, CSS 등 컴퓨터 언어 코드를 예쁘게 보여지도록 하는 것은 Syntax Highlighter 라는 플러그인을 적용했기 때문입니다. 이 플러그인을 적용하면 기본적으로 코드의 왼쪽 줄번호 부분까지 드래그가 가능 하도록 되어 있습니다. 이 때, user-select:none; 이 코드를 이용하면, 지금 이 곳에 적용된 것 처럼, 줄번호 부분이 선택되지 않도록 할 수도 있습니다. 참고하실 분 있으시면 참고하세요. 오늘도 볼품없는 글에 시간을 내어 읽어주신 여러분, 감사합니다.
'공부 > 디자인/그래픽' 카테고리의 다른 글
| 워드프로세서 양식을 순수 HTML 코드로 바꾸는 방법 (1) | 2015.07.16 |
|---|---|
| 티스토리 블로그 검색시 검색결과 없음 출력하기 (3) | 2015.07.01 |
| 기획자를 위한 필수 화면설계도구 Power Mockup (0) | 2015.01.15 |
