CSS user-select 기반의 선택 제어

IE10 플랫폼 프리뷰 4는 새로운 CSS 속성인 -ms-user-select를 지원합니다. 이에 따라, 웹 개발자는 웹 사이트에서 선택 가능한 텍스트를 보다 정확하고 간편하게 제어할 수 있게 되었습니다. 여러분께서 제가 일하는 모습을 살짝 엿본다면 컴퓨터 화면의 글을 읽으며 텍스트를 선택하는 모습을 보게 될 것입니다. 이렇게 글을 읽는 사람은 비단 저뿐만이 아닙니다. 인터넷 페이지에서 텍스트를 선택하는 것이 다른 여러 상황에서도 중요하기 때문이죠.

일반적인 뉴스 웹 사이트를 예로 들어보겠습니다. 대부분의 페이지에는 뉴스 기사가 포함되어 있고 사용자는 텍스트를 선택하여 읽거나 내용을 공유하기 원하기 때문에 기사 내용을 선택할 수 있어야 합니다. 또한, 뉴스 웹 페이지에는 몇 가지 메뉴와 함께 사이트의 다른 부분으로 이동하기 위한 링크도 있습니다. 하지만, 사용자는 이러한 항목을 잘 선택하지 않습니다. 이러한 사용자의 경향에 맞게 웹 개발자는 -ms-user-select를 사용하여 뉴스 기사의 텍스트 선택은 가능하지만 메뉴의 텍스트의 선택은 하지 못하게 지정할 수 있습니다.

이에 대한 예는 IE 테스트 사이트에 나와 있습니다.

전체 페이지에서 -ms-user-select:none을 설정한 다음 블로그 게시물을 포함한 요소에 -ms-user-select:element를 설정하면 블로그 게시물의 내용만 선택할 수 있게 됩니다. -ms-user-select:element는 IE에 처음 도입된 새로운 속성으로, 여러 상황에서 유용하게 활용할 수 있습니다. -ms-user-select:element를 설정하면 사용자가 이 요소의 텍스트를 선택할 수 있지만 선택 가능한 영역이 이 요소의 범위로만 제한됩니다. 뉴스 기사의 내용을 선택하는 대부분의 사용자는 기사 하단에 있는 바닥글 요소를 선택하지 않을 것입니다. -ms-user-select:element를 설정해 놓으면 사용자는 마우스를 정확한 위치로 가져가야 한다는 부담감 없이 기사의 내용만 손쉽게 선택할 수 있게 됩니다.

-ms-user-select에서는 다음과 같은 4개의 값을 지원합니다.

• text – 텍스트를 선택할 수 있습니다.
• element – 텍스트를 선택할 수 있지만 요소 범위로 제한됩니다.
• none – 텍스트를 선택할 수 없습니다.
• auto – 요소에 입력 요소 또는 콘텐츠 편집 가능 요소 등 편집 가능한 텍스트가 포함되어 있으면 텍스트를 선택할 수 있습니다. 그렇지 않은 경우에는 부모 노드의 값에 의해 선택이 결정됩니다.

auto는 -ms-user-select의 기본값입니다.

개발자는 -ms-user-select를 none으로 설정하여 텍스트 선택을 해제할 수 있습니다. IE에서 텍스트를 -ms-user-select:none으로 설정하면 사용자가 이 텍스트 블록 내에서 선택을 시작할 수 없습니다. 그러나, 사용자가 페이지의 다른 부분에서 텍스트 선택을 시작하면 -ms-user-select가 none인 영역을 포함하여 페이지의 다른 모든 영역도 계속 이어서 선택할 수 있습니다. Firefox의 경우 개발자가 –moz-user-select:none을 설정하면 이 영역에서 선택이 시작되지 않으며 다른 어떤 선택에도 콘텐츠가 포함될 수 없습니다. 한편, Webkit의 경우 –webkit-user-select:none을 설정하면 선택 영역에 텍스트가 포함되지 않는 것처럼 나타나지만 실제로 콘텐츠를 복사하여 붙여 넣으면 콘텐츠가 포함되어 있다는 사실을 알게 됩니다.

user-select는 본래 CSS3 사용자 인터페이스 모듈에서 제안되었습니다. 이 모듈은 이후 CSS3 기본 사용자 인터페이스 모듈로 대체되었지만 이 속성은 정의하지 않습니다. Mozilla 및 Webkit의 경우 이 속성을 자체 접두사를 붙여 지원합니다. 하지만 앞서 설명한 바와 같이 구현하는 방식에는 다소 차이가 있습니다.

IE 테스트 사이트에서 여러 가지 예를 경험해 보시고 의견을 말씀해 주시기 바랍니다.

—Sharon Newman, 프로그램 관리자, Internet Explorer