[기타]Github - 뱃지 만들기

깃허브에 README.md 파일을 꾸미려고 뱃지에 대해 알아보는데

배지를 만드는게 생각보다 쉽지 않았다.

 

그리고 뱃지를 만드는데 필요한 사이트는 찾기가 쉬웠는데 이 사이트들을 구체적으로

어떻게 이용해서 만드는지에 대해서는 찾기가 쉽지 않았다.

 

헤메다가 결국 방법을 찾아서

나중에 쉽게 적용하기위해 여기에 방법을 적어놓으면 좋을 것 같아서 포스팅한다.

 

1. 필요한 사이트

뱃지 : https://shields.io/

Shields.io: Quality metadata badges for open source projects

아이콘 : https://simpleicons.org/

Simple Icons

 

이 두 사이트를 가지고 만들면 된다.

 

나의 Github에 있는 배지들이다.

먼저 아이콘 사이트에 들어간다.

 

simpleicons.org

Simpleicons 사이트에 들어가면 Search 탭이 있다.

여기서 원하는 이모티콘을 대충? 검색하면 된다.

나는 Gmail이모티콘을 원해서 Search 탭에 mail이라고 쳤더니 관련 이모티콘으로 Gmail이 나오는 것을 볼 수 있다.

이런식으로 React, Node, TypeScript등등 검색하면 된다.

여기서 Gmail이라고 된 부분이랑 #EA4335 두 부분을 가지고 뱃지를 만들건데,

Gmail은 Logo 코드라고 생각하면 되고, 해시코드는 뱃지의 배경색에 이용한다고 생각하면 된다.

이제 shields.io/ 사이트로 이동하면 된다.

 

뱃지의 기본 구성인 것 같다. '-' 문자로 구분되며 순서대로 LABEL, MESSAGE, COLOR가 오도록 URL을 구성하면 되는 것 같다. JavaScript-E3E3E3 이런식으로 쓰면 앞의 LABEL은 생략되는 것 같다. 세가지 속성이 '-' 문자로 구분되니 문자열에 '-'을 쓰지 않도록 주의하면 될 것 같다.

이 부분은 스타일이다. URL의 뒤에 원하는 스타일을 추가하면 될 것 같다.

로고의 색을 정하는 코드이다.

 

이 세 부분을 참고해서 만들면 된다.

 

예를 들어 Node.js 뱃지를 만들고 싶다면

 

<img src="https://img.shields.io/badge/Node.js-339933?style=flat-square&logo=Node.js&logoColor=white">

 

이렇게 구성하면 된다.

Node.js-339933 이 부분은 뱃지의 내용과 뱃지의 배경색을 설정하는 부분

style 부분은 뱃지의 모양, 크기를 정하는 부분이고

logo는 simpleicons 사이트에서 해당이름의 로고를 가져오는 것이다(추정)

logoColor는 아이콘의 색을 정하는 부분이다.

 

이상으로 뱃지를 다는 방법에 대한 포스팅을 마친다.