-
2021.11.14옵션으로 더 볼 것들 2021. 11. 14. 15:34
1. data attribute
데이터 속성 -> HTML5에서 추가됨
html5에서 제공하는 속성만이 아니라 내가 원하는 데이터를 DOM 요소에 추가할 수 있는 역할
'data-' 의 형태로 사용할 수 있음
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Data Attributes</title> <style> div{ width : 200px; height : 200px; background-color : tomato; margin-bottom : 50px; } div[data-display-name="avocado"]{ background-color: aliceblue; } </style> </head> <body> <div data-index="1" data-display-name="avocado"></div> <div data-index="2" data-display-name="world"></div> <span data-index="2" data-display-name="world">태그가 다르다면</span> <script> const avocado = document.querySelector('div');//이 경우는 div 태그들 중에서 제일 첫번째 const world = document.querySelector('div[data-display-name="world"]');//css에서 정의한 것을 갖다 쓸 수도 있음 (따옴표 주의!) console.log (world.dataset); </script> </body> </html>javascript에서 document.querySelector('div[data-display-name="world"]'); 만들어준 속성에 대해 querySelector를 해주고 해당 객체의 dataset을 콘솔에 찍으면
data- 뒤에 오는 속성명과 값을 key:value로 가져오는 것을 확인할 수 있음.
-도 사라지고 camelcase화 되어 map에 들어간다.
한가지 주의할 점은 우리가 dom에 요소로 데이터를 추가한다는 것은
사용자가 데이터를 다운받거나 해커에게 해당 데이터를 노출할 수 있다는 의미
그래서 민감한 정보는 암호화하여 자바스크립트 내에 담아둬야 한다.
민감한 정보인지 아닌지를 판단하여 코드를 짜는 것이 중요하다.
'옵션으로 더 볼 것들' 카테고리의 다른 글
VSCode 단축키 (0) 2022.01.28 2022.01.05 (0) 2022.01.06 2021.11.11 (0) 2021.11.11 2021.11.07_background (0) 2021.11.07 2021.11.07_align (0) 2021.11.07