JS공부 dataset/ data- 사용자 정의 속성

ezweb강의를 들으며 자바스크립트를 이용해 글씨에 마우스를 갖다대면 관련 이미지가 크게 뜨는
hover효과를 구현해보려 했다.
그런데 구현 도중 html에서 data-를 이용해 사용자 정의 속성을 만드는 것과
getAttribute와 비슷한 역할을 하는 dataset이 궁금해졌다.

같이 한번 알아보자

1. HTML data- 속성

사용방법

<태그명 data-*="값"></태그명>

html을 이용해 개발하다보면 속성을 만들어 쓰고 싶을 때가 있다.
그때 사용할 수 있는 것이 사용자 정의 속성이다.
앞서 말한 hover효과(글씨에 마우스를 갖다대면 배경이 글씨 관련 사진으로 바뀜)를 구현하기 위해서 data-bg라는 속성을 만들어 보았다.

<a data-bg="https://s3-us-west-2.amazonaws.com/s.cdpn.io/485050/freedom.jpg" target="_blank">freedom</a>

2. dataset
   사용방법

문서객체선택.dataset.속성명;
문서객체선택.dataset[속성명];

자바스크립트는 dataset 속성을 통해 사용자 정의 속성 값에 쉽게 접근할 수 있게 하였다.
이 메서드를 이용해 이미지를 미리 생성해 놓고, html에 만든 data-bg속성의 값을 새로 생성한 이미지 요소의 src로 지정해보았다.

const links = document.querySelectorAll('.container a');
const bg = document.querySelector('.bg');
const showClass = 'bg-show';
for(const link of links){
  const img = new Image();
  img.src = link.dataset.bg;
}

출처
1.[JS강좌] 30강 dataset : 문서객체 사용자정의속성 - 오쌤의 니가스터디
https://ossam5.tistory.com/251
2.Javascript 21 [ Hover Animation ] 풀스크린 호버 이펙트 애니메이션, css 변수지정 활용하기, es6
https://www.youtube.com/watch?v=4yUZF7CTpiI&list=PL-qMANrofLyvzqz2yYzNectJnYo5ZifE7&index=20

ps. github에 꾸준히 커밋을 시작한지 83일이 되었다. 처음에는 프로그래머스 문제를 풀며 코드를 기록했었는데, 요즘은 javascript 공부를 하며 코드를 기록하기 시작했다. 이력서도 다시 다듬었으며, 면접 복장을 준비하였다. 이제는 꾸준히 회사를 지원하고, 면접준비와 정처기 실기 준비를 조금씩 하려고 한다.