# Chardin.js - 사용법을 화면에 오버레이로 보여주기

> Clean Markdown view of GeekNews topic #1564. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=1564](https://news.hada.io/topic?id=1564)
- GeekNews Markdown: [https://news.hada.io/topic/1564.md](https://news.hada.io/topic/1564.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2020-02-22T09:38:26+09:00
- Updated: 2020-02-22T09:38:26+09:00
- Original source: [github.com](https://github.com/heelhook/chardin.js)
- Points: 6
- Comments: 1

## Topic Body

- 현재 페이지를 어둡게 하고 그 위에 사용법을 깔끔한 오버레이로 표시

- 클릭당 단계가 넘어가게 처리가능

- data속성에 설명의 위치,내용을 지정하는 방식

- json으로 설명만 모은 파일을 로딩하는 것도 가능

## Comments



### Comment 1168

- Author: xguru
- Created: 2020-02-22T09:38:50+09:00
- Points: 1

만들어진지 7년된 라이브러리인데 최근에 새로 커밋이 올라오기 시작.

이런 라이브러리가 여러개 있는데, 아직까지도 한번에 보여주는 이 방식이 제일 맘에 드네요.

다른것들은 버튼으로 단계별 이동하는 방식이라 사용자 입장에서 귀찮거든요.

- Intro.js https://introjs.com/

- Driver.js https://kamranahmed.info/driver.js/

- Shepherd https://github.com/shipshapecode/shepherd