Github markdown README badge

Readme.md Badges

다음과 같이 프로젝트 README 또는 개인 프로필 README에 badge를 추가할 수 있다

 

 

 

만드는 방법

shields.io에서 badge를 만들 수 있다

https://shields.io/badges

Static Badge | Shields.io

 

아이콘과 색상은 Simple Icons 사이트에서 확인할 수 있다

https://simpleicons.org/

Simple Icons

 

 

기본적으로 shields io의 URL로 배지를 만든다

https://img.shields.io/badge/{뱃지 이름}-{뱃지 색깔}?logo={로고 이름}&logoColor={로고 색깔}

 

배지 이름은 원하는 이름으로 지어주고 배지 색깔과 로고 이름은 Simple Icons에서 확인할 수 있다

 

 

예시

자바스크립트 뱃지를 만들어본다

 

Simple Icons에서 javscript를 검색한다

 

로고 이름은 JavaScript고 색상은 F7DF1E다

이거를 URL에 그대로 입력하면 된다

 

markdown 편집기에서 다음과 같이 입력해 배지를 확인한다

![자바스크립트](https://img.shields.io/badge/JavaScript-black?logo=JavaScript&logoColor=F7DF1E)

<img src="https://img.shields.io/badge/JavaScript-black?logo=JavaScript&logoColor=F7DF1E">

 

또는 검색창에 입력해 확인할 수 있다

 

 

 

로고 커스텀

원하는 로고가 Simple Icons 사이트에 없을 수 있다

위 이미지의 로고는 직접 만든 것이다

 

커스텀 URL은 다음과 같다

https://img.shields.io/badge/{뱃지 이름}-{뱃지 색깔}?logo=data:image/svg+xml;base64,<base64_image>&style=for-the-badge

 

svg 이미지 파일을 Base64 인코딩한 결과를 <base64_image> 대신 넣으면 된다

 

1. svg 이미지 구하기

원하는 svg 이미지를 다운로드한다

2. Base 64 인코딩

svg 파일의 텍스트를 인코딩하고 출력된 결과를 가져온다

https://www.base64encode.org/

Base64 Encode and Decode - Online

 

아래는 인코딩 예시다

 

3. 이미지 출력

makrdown으로 이미지 출력해 본다

![커스텀 뱃지](https://img.shields.io/badge/blog-172B4D?logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MiIgaGVpZ2h0PSI0MiIgZmlsbD0ibm9uZSI+PHJlY3Qgd2lkdGg9IjQyIiBoZWlnaHQ9IjQyIiBmaWxsPSIjMkU2RkYyIiByeD0iMTAiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMzIuOTA2IDIxYy0uNjA0IDAtMS4wOTMuNDgtMS4wOTMgMS4wNzUgMCAyLjYzMy0yLjE4IDQuNzc1LTQuODYgNC43NzUtMi42NzkgMC00Ljg2LTIuMTQzLTQuODYtNC43NzVDMjIuMDk0IDIxLjQ4IDIxLjYwNSAyMSAyMSAyMXMtMS4wOTQuNDgtMS4wOTQgMS4wNzVjMCAyLjYzMy0yLjE4IDQuNzc1LTQuODYgNC43NzUtMi42NzggMC00Ljg1OS0yLjE0My00Ljg1OS00Ljc3NSAwLS41OTQtLjQ4OS0xLjA3NS0xLjA5My0xLjA3NUM4LjQ4OSAyMSA4IDIxLjQ4IDggMjIuMDc1IDggMjUuODkzIDExLjE2MSAyOSAxNS4wNDcgMjlBNy4wNzUgNy4wNzUgMCAwIDAgMjEgMjUuNzczIDcuMDc2IDcuMDc2IDAgMCAwIDI2Ljk1MyAyOUMzMC44NCAyOSAzNCAyNS44OTMgMzQgMjIuMDc1IDM0IDIxLjQ4IDMzLjUxIDIxIDMyLjkwNiAyMVpNMTUgMThhMiAyIDAgMSAwIDAtNCAyIDIgMCAwIDAgMCA0Wk0yNyAxOGEyIDIgMCAxIDAgMC00IDIgMiAwIDAgMCAwIDRaIi8+PC9zdmc+&style=for-the-badge&logoColor=black")

 

 

 

Markdown Badges

배지를 모아놓은 깃허브 프로젝트도 있다

원하는 걸 찾아보고 가져다 쓰자

 

https://github.com/Ileriayo/markdown-badges#Badges

GitHub - Ileriayo/markdown-badges: Badges for your personal developer branding, profile, and projects.