3월28일 - readme.md 파일에 뱃지badge 넣기 with. shields.io

개요

남의 깃허브 프로젝트를 보다 보면 이런 기술 스택을 나타낸 뱃지들을 본 적이 있을 것이다.

 

깔끔하고 이뻐서 남이 만들어놓은 걸 검색해 가져다 쓰곤 했는데 

Nest.js 뱃지를 만들어 놓은 사람들이 없어 내가 만드는 법을 찾다보니

방법만 알면 누구든지 원하는대로 만들 수 있을 것 같아 그 방법을 공유하고자 포스팅한다.

 

방법

<img src="https://img.shields.io/badge/{뱃지이름}-{뱃지색깔}?style={뱃지스타일}&logo={로고이름}&logoColor={로고색깔}"/>

기본적으로 위의 틀을 기반으로 만들어진다.

추가로 개요에서 살펴본 뱃지에 추가로 버전 등을 같이 나타내고 싶다면 shields.io 공식 사이트에서

사용 방법을 살펴보길 바란다.

 

이 포스팅에서는 개요에 나온 매우 심플한 배지를 만드는 방법만 소개할 예정임

<img src="https://img.shields.io/badge/{뱃지이름}-{뱃지색깔}?style=flat-square&logo={로고이름}&logoColor=white"/>

심플하게 뱃지이름, 뱃지색깔 부분만 지정해주면 끝이다.

로고이름에는 뱃지이름과 똑같이 넣어주면 된다.

 

자 이제 뭘 어떻게 넣어야 하느냐

simple icon을 사용할 수 있게 제공해주는 사이트가 있다.

https://simpleicons.org/?q=github

위 사이트인데 일부러 github를 검색하는 상태로 링크를 걸어두었다.

 

그냥 사이트 메인으로 접속할 경우 페이지네이션 없이 모든 아이콘을 불러오기에 

느려서 접속이 안되는 상황까지 발생할 수 있음

 

검색해서 나오는 아이콘에 대해 

위의 빨간 네모가 뱃지이름이고

아래 빨간 네모가 뱃지색깔이다. # 빼고 입력해주면 된다.

 

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

그렇게 img 태그를 만들면 개요에서 살펴본 뱃지와 같이 나오게 된다. 

끝!