HTML data 속성

HTML data 속성

최신버전의 BootStrap에서 data속성을 사용할 때는 data-bs-toggle처럼 되어있다/ 주의할 것!@!!

data-(일반적인 데이터 속성)

• 사용자 지정 데이터 속성을 정의하는데 사용
• javaScript 및 css에서 추가 데이터 저장 및 선택 가능
• javaScript를 사용하여 요소에 추가 정보를 저장, 처리 가능
• 남용하면 코드 혼란
• 시멘틱 태그를 대체하면 안됨

data-toggle

• 특정 동작을 트리거하는데 사용 ex) 부트스트랩에서 드롭다운, 모달 토글
• 인터랙티브한 요소를 사용자에게 제공하는데 유용
• 사용자 경험을 해칠 가능성 있음
• 특정 동작을 실행하도록 트러기되는지 확인 필수

data-target

• data-toggle과 함께 사용되어 토글할 대상을 나타냄
• 보통 모달이나 드롭다운과 연관
• 특정 요소와 연결하여 특정 동장 수행 가능
• 잘못된 대상을 설ㄹ정하면 기능 작동 x
• 대상 요소 정확히 설정 해야함

data-bs-target

• 부트스트랩 컴포넌트의 대상을 지정하는데 사용
• 요소를 대상으로 쉽게 연결 가능
• 잘못된 대상을 설정하면 컴포넌트가 제대로 작동 x
• 대상 요소를 정확히 설정 중요

data-bs-dismiss

• 부트스트랩 모달이나 경고창 등을 닫는데 사용
• 모달이나 경고창 쉽게 닫기 가능
• 오용하면 사용자에게 혼란 줄 가능성 있음
• 실행할 대상 올바르게 설정 필요

data-src

• 지연 로딩을 구현할 때 사용
• 이미지나 비디오 등의 미디어 콘텐츠를 나중에 로드하도록 지정 가능
• 초기 페이지 로드 시간 단축 가능
• javascript를 이용하여 추가 로직을 구현해야 할 가능성 있음
• 지연로딩된 콘텐츠가 사용자 경험에 부정적인 영향 미칠 가능성 있음

data-action

• 사용자가 클릭 또는 터치 등의 이벤트를 실행할 때 수행할 동작을 지정하는데 사용
• 사용자와의 상호작용을 향상
• 잘못된 동작을 지정하면 오류 발생
• 동작 설정 올바르게 하기

data-attribute

• 사용자가 지정 데이터 저장하고 DOM 요소와 관련된 추가 정보 제공 가능
• 코드의 가독성 저해
• 사용자 정의 데이터 속성을 사용할 때 HTML 표준 ㅅ준수

data-validate

• 사용자가 입력한 데이터나 양식에 대한 유효성 검증하는데 사용
• 주로 폼 입력 필드와 관련된 유효성 검사에 활용
• 클라이언트 측에서 간단한 유효성 검사를 수행 가능
• 보안상의 이유로 서버 측 유효성 검사와 함께 사용하는 것이 좋음
• 신뢰할 수 있는 데이터만 수행해야 함