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
https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/
'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 |
댓글