Markdown Badges 만들기

harimad·2022년 12월 27일

Markdown badge

Intro

개인 프로젝트나 팀 프로젝트를 할 때 ReadMe.md 파일에서 위의 그림처럼 프로그래밍 언어를 표시하고 싶을 때가 있습니다.

Q. 어떻게 만들 수 있을까요?

우선 shields.io 사이트에서 markdown badges를 생성할 수 있습니다.
프로그래밍 언어마다 고유의 색깔이 있습니다.
색상은 simple icons 사이트에서 알 수 있습니다.
자세한 사항은 본론에서 확인해 보도록 하겠습니다.

본론

shields.io

이 사이트에서 마크다운 배지를 생성할 수 있는 url을 제공합니다.
url에 인자값을 넣어줘서 원하는 뱃지를 생성할 수 있습니다.
포멧은 아래와 같습니다.

format 1

https://img.shields.io/badge/<LABEL>-<MESSAGE>-<COLOR>

예시

format 2

https://img.shields.io/static/v1?label=<LABEL>&message=<MESSAGE>&color=<COLOR>

예시

Simple Icons

프로그래밍 언어 로고 색상을 이 사이트에서 쉽게 찾아볼 수 있습니다.

Badges Example

자주 사용하는 뱃지 예시를 살펴보겠습니다.

Name	Badge	Markdown
Html		![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)
Css		![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
JavaScript		![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
React		![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
Vue		![Vue.js](https://img.shields.io/badge/vuejs-%2335495e.svg?style=for-the-badge&logo=vuedotjs&logoColor=%234FC08D)
NodeJs		![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white)
Mysql		![MySQL](https://img.shields.io/badge/mysql-%2300f.svg?style=for-the-badge&logo=mysql&logoColor=white)
mongoDB		![MongoDB](https://img.shields.io/badge/MongoDB-%234ea94b.svg?style=for-the-badge&logo=mongodb&logoColor=white)
Python		![Python](https://img.shields.io/badge/python-3670A0?style=for-the-badge&logo=python&logoColor=ffdd54)
Java		![Java](https://img.shields.io/badge/java-%23ED8B00.svg?style=for-the-badge&logo=java&logoColor=white)
AWS		![AWS](https://img.shields.io/badge/AWS-%23FF9900.svg?style=for-the-badge&logo=amazon-aws&logoColor=white)
C++		![C++](https://img.shields.io/badge/c++-%2300599C.svg?style=for-the-badge&logo=c%2B%2B&logoColor=white)
GitHub		![GitHub](https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white)
KakaoTalk		![KakaoTalk](https://img.shields.io/badge/kakaotalk-ffcd00.svg?style=for-the-badge&logo=kakaotalk&logoColor=000000)