텍스트가 선택되지 않게 하기

[SeonHyungJo]

우리가 웹 사이트에서 블로그나 어떤 글을 읽고 있을 때 마우스로 드래그를 하거나 더블클릭을 하여 텍스트를 선택하는 경우가 있을 것이다.

그러나 구현을 하다보면 버튼으로 사용하고 있는 경우 갑자기 텍스트가 선택되는 경우가 발생하게 되면 짜증이 발생할 수 있다.

이에 간단하게 CSS 속성으로 막을 수 있다.

-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */

none 이외의 다른 속성값도 존재하니 한 번씩 보는 것도 좋을 듯 하다.

Reference

• MDN - user-select