반응형
Readme.md Badges
다음과 같이 프로젝트 README 또는 개인 프로필 README에 badge를 추가할 수 있다
만드는 방법
shields.io에서 badge를 만들 수 있다
아이콘과 색상은 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 파일의 텍스트를 인코딩하고 출력된 결과를 가져온다
아래는 인코딩 예시다
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
반응형
'git' 카테고리의 다른 글
git push 유저 정보 (0) | 2024.05.24 |
---|---|
git 명령시 한글이 숫자로 보이는 문제 (0) | 2024.05.20 |
git cache 삭제 (0) | 2024.05.19 |