버튼 라이브러리 샤론.js

「https://shareon.js.org/」

샤론은 코드 한 줄로 소셜 네트워크 아이콘을 사용할 수 있는 간단한 버튼 라이브러리다.

CSS프레임워크 중에서는 SNS아이콘을 제공하는 경우가 많은데, 샤론은 이들보다 더욱 가볍고, 빠르다. 코드 3줄이면 된다.

설치

---

샤론이 제공하는 js, css파일 CDN을 body태그 상단이나 head태그에 삽입해보자.

<link href="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.js" type="text/javascript"></script>

사용법

---

이후 <div>태그에 'shareon'클래스명을 지정해주고, a태그의 클래스명을 아래와 같이 지정하면 된다. 사실상 너무 간단해서 딱히 할말이 없다.

<div class="shareon">

    <a class="facebook"></a>

    <a class="linkedin"></a>

    <a class="messenger"></a>

    <a class="odnoklassniki"></a>

    <a class="pinterest"></a>

    <a class="pocket"></a>

    <button class="reddit"></button>

    <button class="telegram"></button>

    <button class="twitter"></button>

    <button class="viber"></button>

    <button class="vkontakte"></button>

    <button class="whatsapp"></button>

</div>

[결과]