# HTML 데이터 속성 (data-) 속성에 접근하기

데이터 속성은 사용자 정의 데이터를 **HTML 요소에 저장하기 위해 사용되는 속성**이다.

문장을 이어갈 때는 `-` 키워드를 통해 엘리먼트에 정의를 해주면 된다.

```
<div data-is-show="true" id="el"></div>
```

위와 같이 `data-is-show` 속성이 데이터 속성에 해당되며, 자바스크립트에서 데이터 속성에 접근을 하려면 `dataset` 객체를 활용하면 된다. 여기서 확인해야할 점은 케밥 케이스로 작성했던 데이터 속성의 이름이 `JS` 의 카멜 케이스 형식으로 매핑된다는 것이다.

예를 들어 `data-is-show` 는 `[dataset.isShow](https://dataset.isShow)`로 접근할 수 있다. 

```
// js
const el = document.querySelector('#el');
console.log(el.dataset.isShow);
```

CSS에서도 데이터 속성을 활용할 수 있는데, `attr()` 함수나 속성 선택자를 통해 데이터 속성의 값을 기반으로 스타일을 적용할 수 있다.

```
[data-is-show="true"] {
  display: block;
}
```

For the site tree, see the [root Markdown](https://slashpage.com/timmy.md).