[GitHub]마크다운에 벳지, 아이콘 사용법

Github에는 README.md 파일을 사용하여 보다 쉽게 해당 프로젝트를 설명할 수 있는 마크다운 기능을 제공한다.

그리고 보다 시각적으로 표현 할 수 있게 벳지와 아이콘을 사용할 수 도 있다.

 

예시)

https://github.com/Hun-Se/Hun-Se

Hun-Se/Hun-Se

위 예시는  사용 할 수 있는 기술들을 아이콘과 벳지로 보다 시각적으로 표현한 예시이다.

 

 

-예시 코드

# Kim Se Hun
### Hi there 👋 </br>I'm SeHun Kim, I hope to Frontend-Engineer

## 💻 My Stack
<img alt="Html" src ="https://img.shields.io/badge/HTML5-E34F26.svg?&style=for-the-badge&logo=HTML5&logoColor=white"/> <img alt="Css" src ="https://img.shields.io/badge/CSS3-1572B6.svg?&style=for-the-badge&logo=CSS3&logoColor=white"/> <img alt="JavaScript" src ="https://img.shields.io/badge/JavaScriipt-F7DF1E.svg?&style=for-the-badge&logo=JavaScript&logoColor=black"/> <img alt="Python" src ="https://img.shields.io/badge/Python-3776AB.svg?&style=for-the-badge&logo=Python&logoColor=white"/> <img alt="Flutter" src ="https://img.shields.io/badge/Flutter-02569B.svg?&style=for-the-badge&logo=Flutter&logoColor=white"/> <img alt="Android" src ="https://img.shields.io/badge/Android-3DDC84.svg?&style=for-the-badge&logo=Android&logoColor=black"/>

## 💻 ...
<a href = "https://github.com/Hun-Se"><img alt="GitHub" src ="https://img.shields.io/badge/GitHub-181717.svg?&style=for-the-badge&logo=GitHub&logoColor=white"/>
</a> <a href = "https://for-it-study.tistory.com/"> <img alt="Tistory" src ="https://img.shields.io/badge/Tistory-white.svg?&style=for-the-badge"/></a>
</a> <a href = "hun-se.slack.com"> <img alt="Slack" src ="https://img.shields.io/badge/Slack-4A154B.svg?&style=for-the-badge&logo=Slack&logoColor=white"/></a>

 

- 사용법

<img alt="Html" src ="https://img.shields.io/badge/원하는 아이콘.svg?&style=for-the-badge&logo=벳지내 글자&logoColor=벳지 글자 색"/>

 

다음 사이트에 접속하면 보다 많은 예시와 자세한 사용법을 알 수 있다.

 

벳지 사용법 및 예시 사이트

https://shields.io/

Shields.io: Quality metadata badges for open source projects

아이콘 사용법 및 에시 사이트

https://simpleicons.org/

Simple Icons

 

위 사이트에 들어가면 예제들과 많은 종류들의 벳지와 아이콘들이 사용 가능하다.