Git

[Github] Readme.md 스킬, 라이브러리 배지 삽입 방법

skwkiix 2024. 2. 15. 23:54
728x90

 

배지 삽입하는 방법

배지는 깃허브 readme.md 에서 많이 볼 수 있는, SkillSet 표시나 사용한 라이브러리를 시각적으로 표시할 때 많이 사용한다.

 

 

 

 

 

배지 API를 제공하고 있는 shields.io 를 이용해서, 이미지 파일 없이 readme 를 작성할 수 있는 방법을 소개한다.

 

Static Badge | Shields.io

One of the named logos (bitcoin, dependabot, gitlab, npm, paypal, serverfault, stackexchange, superuser, telegram, travis) or simple-icons. All simple-icons are referenced using icon slugs. You can click the icon title on simple-icons to copy the slug or t

shields.io

(Document 에서 자세한 사용법을 참고할 수 있다.)

 

 

소스 코드 

HTML 이미지 태그를 이용한다. 다음은 기본 코드이다.

<img src="https://img.shields.io/badge/배지이름-배지배경색?
          style=배지모양
          &logo=로고이름
          &logoColor=로고색상"/>

 

로고 이름, 로고 색상 등을 볼 수 있는 Simple Icons 사이트를 이용해서 완성한다.

 

Simple Icons

3014 Free SVG icons for popular brands

simpleicons.org

 

 

예시) Python

 

1. 배지 이름, (배지 이름)

Python(원하는 이름)

 

2. 배지 배경색

#3776AB(복붙) 에서 #을 제거하고 사용해야한다 > 3776AB

 

3. 로고 이름(&logo)

Python (복붙)

 

4. 배지 모양 (plastic, flat, flat-square, for-the-badge, social 중 선택)

for-the-badge

 

<img src="https://img.shields.io/badge/Python-3776AB?
          style=for-the-badge
          &logo=Python
          &logoColor=white"/>

 

 

728x90