Interactions

Interactions (상호작용)

사용자가 웹사이트의 내용과 상호작용하는 방식을 바꿔주는 유틸리티 클래스에 대해 알아봅니다.

출처: 문서

본문

텍스트 선택 (Text selection)

사용자가 내용과 상호작용할 때 내용이 선택되는 방식을 변경합니다.

• 클릭하면 이 문단 전체가 선택됩니다.
• 이 문단은 기본 선택 동작을 유지합니다.
• 클릭해도 이 문단은 선택되지 않습니다.

<p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
<p class="user-select-auto">This paragraph has default select behavior.</p>
<p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>

포인터 이벤트 (Pointer events)

Bootstrap은 요소의 상호작용을 막거나 허용하는 .pe-none과 .pe-auto 클래스를 제공합니다.

• 이 링크는 클릭할 수 없습니다.
• 이 링크는 클릭할 수 있습니다 (기본 동작입니다).
• 이 링크는 pointer-events 프로퍼티가 부모로부터 상속되므로 클릭할 수 없습니다. 그러나 이 링크는 pe-auto 클래스를 가지므로 클릭할 수 있습니다.

<p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.</p>
<p><a href="#" class="pe-auto">This link</a> can be clicked (this is default behavior).</p>
<p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">This link</a> can not be clicked because the <code>pointer-events</code> property is inherited from its parent. However, <a href="#" class="pe-auto">this link</a> has a <code>pe-auto</code> class and can be clicked.</p>

.pe-none 클래스(그리고 이 클래스가 설정하는 pointer-events CSS 프로퍼티)는 포인터(마우스, 스타일러스, 터치)와의 상호작용만 막습니다. .pe-none이 적용된 링크와 컨트롤은 기본적으로 키보드 사용자에게 여전히 포커스 가능하고 동작 가능합니다. 키보드 사용자에게까지 완전히 무력화하려면 tabindex="-1"(키보드 포커스를 받지 못하게)과 aria-disabled="true"(보조 기술에 실제로 비활성화되었음을 전달) 같은 추가 속성을 더하고, 경우에 따라 JavaScript를 사용해 완전히 동작하지 못하게 해야 할 수도 있습니다.

가능하다면 더 간단한 해결책은 다음과 같습니다.

• 폼 컨트롤에는 disabled HTML 속성을 추가합니다.
• 링크에는 href 속성을 제거해 비상호작용 앵커 또는 플레이스홀더 링크로 만듭니다.

CSS

Sass utilities API

interaction 유틸리티는 scss/_utilities.scss의 utilities API에 선언되어 있습니다. utilities API 사용법을 알아보세요.

scss/_utilities.scss

"user-select": (
  property: user-select,
  values: all auto none
),
"pointer-events": (
  property: pointer-events,
  class: pe,
  values: none auto,
),

더 알아보기 (Learn more)

• Bootstrap 문서