HTML 학습중 data 속성을 알게되었다.
태그에 데이터를 저장? 지정? 하는 속송
- 사용법
<태그 data-이름="데이터"> </태그>
- 예시
신기했던 것은 javascript에서 데이터에 접근할 때 "ele.dataset.데이터이름"으로 접근하는 것이다.
html에서는 분명 데이터 이름을 "place-name"으로 작성했는데
js에서는 placeName으로 접근이 가능했다.
자동으로 이름을 js에서 가능한 이름으로 변경하는 것 같다.
몇 가지 실험을 했다.
1. js 코드 수정
elem.dataset.placename => 동작X
-> HTML에서 하이픈(-)으로 작성한 코드는 js에서 대문자로 접근해야하는 것 같다.
2. html 코드 수정
data-placename으로 데이터 속성 수정
js에서 elem.dataset.placename으로 접근 => 동작 O
* 데이터 속성은 CSS에서도 접근이 가능하다.
다음 링크를 확인하면 더 좋을 것 같다.
https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes
데이터 속성 사용하기 - Web 개발 학습하기 | MDN
HTML5 특정 요소와 연관되어 있지만 확정된 의미는 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 디자인되었습니다. data-* 속성은 표준이 아닌 속성이나 추가적인 DOM 속성, Node.setUserData
developer.mozilla.org
https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/
Using data-* attributes in JavaScript and CSS – Mozilla Hacks - the Web developer blog
When HTML5 got defined one of the things that was planned for was extensibility in terms of data that should be in the HTML, but not visible. The data-* attributes ...
hacks.mozilla.org
'FrontEnd' 카테고리의 다른 글
| [HTML CSS JS] 우측에 고정 배너 구현하기 (0) | 2022.02.06 |
|---|---|
| [HTML CSS JS] 검색 박스 구현 (Search Box) (0) | 2022.02.06 |
| [CSS] 브라우저 스타일 초기화 (0) | 2022.01.22 |
| [CSS] favicon(파비콘) (0) | 2022.01.18 |
| [HTTP] 웹 데이터 전달 방식 GET방식 POST방식 (0) | 2022.01.16 |
댓글