CSS로 텍스트 클릭 및 드래그 방지 구현하기

web-todo-list를 제작하면서 날짜를 나타내는 텍스트가 드래그가 되면 이상해 보인다는 점을 개선하기 위해 검색을 하면서 알게 된 정보이다. 해당 위치의 태그에 대하여 간단한 CSS 코드를 추가하면 된다.

 

해당 부분에 커서를 올려서 클릭이나 드래그를 해보면 안 되는 걸 알 수 있다.

---

코드

#date {
	
    //
    
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
    //
    
}

커서는 기본으로 고정하고 선택을 방지하는 코드를 넣어서 텍스트지만 이미지 같은 느낌을 주었다.

---

참조

https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting

How to disable text selection highlighting