BootStrap 최신 data 속성

최신버전 BootStrap HTML data 속성

data-bs-toggle

• 드롭다운, 탭 모달 등 부트스트랩의 토글 컴포넌트에 사용
• data-bs-target 속성과 함께 사용
• 컴포넌트가 사용자와 상호작용을 할 수 있도록 만들어줌
• 잘못된 사용 시 사용자 경험에 부정적인 영향 미침

data-bs-target

• 모달, 드롭다운 등에서 특정 대상을 지정할 때 사용
• data-bs-toggle속성과 함께 사용
• 여러 대상을 지정하여 다양한 동작을 쉽게 트리거 가능
• 대상 요소를 정확히 식별하지 않을 시 원하는 동작 수행 x

data-bs-dismiss

• 모달 컴포넌트에서 주로 사용
• 모달을 닫는 기능 구현
• 모달 외부의 클릭 등 사용자 의도와 다르게 모달 닫힐 수있음

data-bs-placement

• 툴 팁, 팝오버 등에서 컴포넌트의 위치를 지정할 때 사용
• UI 요소의 배치 위치를 정확하게 제어 가능
• 너무 많은 위치 조정이 사용자에게 혼란 줄 가능성 있음

data-bs-content

• 툴팁, 팝오버 등에서 보여질 내용을 지정할 때 사용
• 다양한 컨텐츠를 간편하게 삽입 가능
• 많은 양의 컨텐츠를 처리할 때 레이아웃 복잡

data-bs-parent

• 아코디언 컴포넌트 등에서 부모 요소를 지정할 때 사용
• 부모 요소를 명시적으로 설정하면 구조를 더욱 명확하게 만들어줌
• 잘못 설정시 오류 발생

data-bs-offset

• 팝오버, 튤팁 등에서 위치를 세밀하게 조정할 때 사용
• 요소의 정확한 위치를 조정하여 정교한 디자인 구현 가능
• 과도한 사용은 사용자 경험을 혼란스럽게 만듬

data-bs-delay

• 팝오버, 튤팁 등에서 표시 지연 시간을 설정할 때 사용
• 특정 시간 후에 나타나도록 설정하여 사용자의 주의를 집중 가능
• 사용자 경험을 방해할 수 있으므로 적절한 시간 설정

data-bs-html

• 튤팁, 팝오버 등에서 HTMl 콘텐츠를 사용할 때 설정
• 다양한 형식의 콘텐츠를 삽입하여 더 풍부한 정보 제공 가능
• 보안 취약점으로 이어질 수 있으므로 신중하게 사용해야 함

data-bs-trigger

• 튤팁, 팝오버 등에서 이벤트 트리거를 설정할 때 사용
• 다양한 이벤트로 컴포넌트 제어
• 과도한 이벤트 설정은 사용자 경험에 부정적인 영향을 미침