텍스트 및 이미지 선택을 사용하지 않는 방법(HTML)

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

JavaScript를 사용하는 Windows 스토어 앱의 UI에서 텍스트 및 이미지를 선택하지 못하게 하는 방법을 알아보세요.

기본적으로 사용자는 JavaScript를 사용하는 Windows 스토어 앱의 UI에서 콘텐츠를 선택할 수 없습니다.

텍스트, 이미지 및 다른 비소유 콘텐츠가 포함된 요소를 선택할 수 있게 하려는 경우 CSS(CSS 스타일시트) 속성 -ms-user-select를 사용하여 기본 동작을 재정의할 수 있습니다.

-ms-user-select 속성은 다음 값을 지원합니다.

none
요소 내에서 선택할 수 없습니다. 그러나 요소 자체는 선택 항목에 포함할 수 있습니다. 이것이 최상위 body 요소 및 상속에 의해 JavaScript를 사용하는 Windows 스토어 앱의 모든 UI 요소에 대한 기본 동작입니다.
element
요소 내에서 선택할 수 있으며 모든 자식 요소도 선택할 수 있습니다. 그러나 요소 범위로 선택이 제한됩니다.
text
요소 내에서 선택할 수 있으며 요소 범위로 선택이 제한되지 않습니다.

참고 콘텐츠를 공유하고 클립보드에서 복사하여 붙여 넣으려면 이 속성을 설정해야 합니다.

알아야 할 사항

이 항목에서는 사용자가 JavaScript용 Windows 라이브러리 템플릿을 사용하는 JavaScript를 사용하여 기본 Windows 스토어 앱을 만들 수 있다고 가정합니다.

첫 번째 Windows 스토어 앱을 만드는 방법에 대한 자세한 내용은 JavaScript로 작성된 첫 번째 Windows 스토어 앱 만들기를 참조하세요.
WinJS 개체와 컨트롤 사용에 대한 자세한 내용은 빠른 시작: WinJS 컨트롤 및 스타일 추가를 참조하세요.

click, MSGestureTap 또는 mouseup 이벤트 처리기가 정의되어 있는 부모 요소가 있는 개체는 선택할 수 없습니다.

이 동작을 재정의하고 click, MSGestureTap 또는 mouseup 처리기가 있어도 선택할 수 있게 하려면 touch-select CSS 속성을 개체에 적용하고 속성에 값 grippers를 할당해야 합니다.

다음 이벤트 처리기 중 하나에서 preventDefault를 호출하면 선택이 취소됩니다.

앱 내에서 모든 UI 요소를 선택할 수 없게 하려는 경우도 있습니다.

이 예에서는 속성 값이 none인 -ms-user-select를 <html> 요소 및 편집 가능한 모든 자식 요소에 적용하여 UI 요소를 선택에서 제외합니다.

참고 모든 요소에서 일관된 UI 피드백을 보장하기 위해 cursor 속성 값도 default로 설정하는 것이 좋습니다.

html  input, textarea, *[contenteditable=true] 
{
    -ms-user-select: none;
    cursor: default;
}

앱에서 선택한 요소를 전체적으로 종료했지만 특정 UI 요소 콘텐츠에 대해 이 설정을 재정의하려면 -ms-user-select 특성을 해당 요소에 적용하고 특성 값을 element로 설정하면 됩니다. 이렇게 하면 요소 범위로 선택이 제한됩니다.

이 예에서는 지정된 ID를 갖는 요소의 콘텐츠(자식 요소 콘텐츠 포함)를 선택할 수 있도록 합니다.

참고 이 요소에 대한 UI 피드백을 구분할 수 있도록 cursor 속성 값을 명시적으로 text로 설정하는 것이 좋습니다.

#selectableDiv 
{
    -ms-user-select: element;
    cursor: text;
}