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

Applies to Windows and Windows Phone

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 스토어 앱을 만들 수 있다고 가정합니다.

지침

선택 동작

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

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

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

모든 UI 요소 선택 사용 안 함

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

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

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

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

편집 불가능 UI 요소 선택 사용

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

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

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

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

관련 항목

텍스트 및 이미지 선택에 대한 지침
예제
-ms-user-select CSS 특성으로 선택할 수 없는 콘텐츠 영역 샘플

 

 

표시:
© 2015 Microsoft