깃허브 프로필 Readme.md 꾸미기 - (뱃지 편)

깃허브 프로필 리드미에 뱃지를 추가하는 방법을 알아보자.

(글의 맨 밑에 뱃지 코드 예시 목록이 있다.)

 

뱃지는 https://shields.io/ 와 https://simpleicons.org/ 를 참고하라는 글이 많다. 하지만 우리는 지금 당장 추가하고 싶다.

 

우선 원하는 뱃지가 다음 링크에 있는지 확인해보자. CTRL + F 를 눌러 검색해보자

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

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

만약 위 링크에 있다면 해당 뱃지의 설명에 있는

오른쪽 코드를 복사해 넣으면 끝이다.

 

저 링크에 없는 경우도 분명히 있을 것이다.

그런 경우 작성법을 빠르게 알아보자.

 

다음은 HTML에 대한 뱃지의 코드이다.

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

다른 부분은 다 같은데, 수정해야하는 부분이 3곳 있다.

<img src="https://img.shields.io/badge/<이름>-<RGB색상>?style=for-the-badge&logo=<로고이름>&logoColor=white">

<이름> 의 경우 원하는 이름을 넣어준다. (당연히 꺽쇠 괄호는 넣는게 아니다.)

<RGB 색상> 과 <로고이름> 의 경우는 어쩔 수 없이 밑의 링크를 참고한다.

 

https://simpleicons.org/

Simple Icons

원하는 기술을 검색해서 나온다면, 로고 이름과 RGB 색상이 나온다.

이름은 직접 복사하고, RGB는 누르면 복사가 된다.

복사한 RGB의 맨 앞 #을 빼고

넣어준다.

 

스프링의 경우 완성본은 다음과 같이 된다.

<img src="https://img.shields.io/badge/Spring-6DB33F?style=for-the-badge&logo=Spring&logoColor=white">

Simple Icons에 없는 경우는 그냥 색상만 RGB 검색해서 비슷한 색상을 넣고(6자리 숫자로) 아이콘 없이 쓰는 수 밖에 없다. 필자의 경우 로고가 없는 경우 로고에 그냥 이름과 같게 넣어줬다.

 

그냥 넣으면 중앙 정렬이 안된다.

그렇다면 해결 방법이 있다.

바로 <div> 태그로 align 속성을 주는 것이다. 이 경우 마크다운 형식은 적용이 안되고 HTML만 적용된다.

<div align=center>
	<img src="https://img.shields.io/badge/Spring-6DB33F?style=for-the-badge&logo=Spring&logoColor=white">
    <br>
</div>

참고로 <br>을 넣으면 한줄 밑에 뱃지를 넣을 수 있다. (한 줄 띄기로 글 쓸 때 엔터와 같은 역할? 이다.)

 

마지막으로 필자가 작성한 뱃지 코드 예시들을 보여주며 글을 마치겠다.

자바
<img src="https://img.shields.io/badge/java-007396?style=for-the-badge&logo=OpenJDK&logoColor=white">

스프링
<img src="https://img.shields.io/badge/Spring-6DB33F?style=for-the-badge&logo=Spring&logoColor=white">

스프링부트
<img src="https://img.shields.io/badge/springboot-6DB33F?style=for-the-badge&logo=springboot&logoColor=white">

스프링 시큐리티
<img src="https://img.shields.io/badge/Spring Security-6DB33F?style=for-the-badge&logo=Spring Security&logoColor=white">

JUnit5
<img src="https://img.shields.io/badge/JUnit5-25A162?style=for-the-badge&logo=JUnit5&logoColor=white">

Hibernate
<img src="https://img.shields.io/badge/Hibernate-59666C?style=for-the-badge&logo=Hibernate&logoColor=white">

MySQL
<img src="https://img.shields.io/badge/MySQL-4479A1?style=for-the-badge&logo=MySQL&logoColor=white">

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

Kafka
<img src="https://img.shields.io/badge/Apache Kafka-%3333333.svg?style=for-the-badge&logo=Apache Kafka&logoColor=white"> 

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

nginx
<img src="https://img.shields.io/badge/nginx-%23009639.svg?style=for-the-badge&logo=nginx&logoColor=white">

docker
<img src="https://img.shields.io/badge/docker-%230db7ed.svg?style=for-the-badge&logo=docker&logoColor=white"> 

GitHub Actions
<img src="https://img.shields.io/badge/GitHub Actions-2088FF?style=for-the-badge&logo=GitHub Actions&logoColor=white">

EC2
<img src="https://img.shields.io/badge/Amazon%20EC2-FF9900?style=for-the-badge&logo=Amazon%20EC2&logoColor=white">

S3
<img src="https://img.shields.io/badge/Amazon%20S3-569A31?style=for-the-badge&logo=Amazon%20S3&logoColor=white">

grafana
<img src="https://img.shields.io/badge/grafana-%23F46800.svg?style=for-the-badge&logo=grafana&logoColor=white">

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

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

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

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

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

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

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

Faust
<img src="https://img.shields.io/badge/Faust-66FFCC?style=for-the-badge&logo=Faust&logoColor=white">

Celery
<img src="https://img.shields.io/badge/Celery-37814A?style=for-the-badge&logo=Celery&logoColor=white">

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

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

Koa
<img src="https://img.shields.io/badge/Koa-33333D?style=for-the-badge&logo=Koa&logoColor=white">

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

CSS3
<img src="https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=CSS3&logoColor=white">

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

React
<img src="https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=React&logoColor=white">

Kotlin
<img src="https://img.shields.io/badge/Kotlin-7F52FF?style=for-the-badge&logo=Kotlin&logoColor=white">

Android
<img src="https://img.shields.io/badge/Android-3DDC84?style=for-the-badge&logo=Android&logoColor=white">

Thymeleaf
<img src="https://img.shields.io/badge/Thymeleaf-005F0F?style=for-the-badge&logo=Thymeleaf&logoColor=white">

Google Colab
<img src="https://img.shields.io/badge/Google Colab-F9AB00?style=for-the-badge&logo=Google Colab&logoColor=white">

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

Selenium
<img src="https://img.shields.io/badge/Selenium-43B02A?style=for-the-badge&logo=Selenium&logoColor=white">

Klaytn
<img src="https://img.shields.io/badge/Klaytn-6F6558?style=for-the-badge&logo=Klaytn&logoColor=white">

(이전 글)

https://ohksj77.tistory.com/200

깃허브 프로필 Readme.md 꾸미기 - (참고 링크편)