스킬배지 꾸미는 방법

스킬배지 만드는 사이트
1. 심플 아이콘 ➔ https://simpleicons.org/
2. 마크다운 문법 미리보기 ➔ https://dillinger.io/
: 이것도 모르고.. 계속 commit했네.. 😕

스킬 배지 만들기

• 스킬 배지 기본구조
  <img src="https://img.shields.io/badge/기술명(글자)-색상?style=for-the-badge&logo=기술명(아이콘)&logoColor=white">
  : 기술명과 색상표만 넣어주면 된다!
  
  
  
• 색상표 + 기술명 가져오기
  <예시 : html5 배지 만들기>

1. 심플 아이콘 사이트 접속
   https://simpleicons.org/

2. 만들고 싶은 뱃지 검색
   

➔ 검색창에 HTML 검색

3. 색상표 클릭 = 복사
   
   복사된 색상표 ➔ #E34F26
   사용할 때는 #제거 후 사용 ➔ E34F26

<img src="https://img.shields.io/badge/기술명(글자)-색상표?style=for-the-badge&logo=기술명(아이콘)&logoColor=white">
색상표 자리에 붙여넣기

⬇️

현재상태

<img src="https://img.shields.io/badge/기술명(글자)-E34F26?style=for-the-badge&logo=기술명(아이콘)&logoColor=white">

4. 기술명(글자) 클릭 = 복사
   
   복사된 기술 이름 ➔ html5

<img src="https://img.shields.io/badge/기술명 (글자)-E34F26?style=for-the-badge&logo=기술명 (아이콘)&logoColor=white">

기술이름 자리에 붙여넣기

⬇️

현재상태

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

완성🎉

기술명(글자)와 기술명(아이콘)을 같게 만드는게 일반적이다.
기술명(글자) == 기술명(아이콘)

⬇️

기술명(글자)과 기술이름(아이콘)이 달라도 상관없다.

<예시1>

기술명(글자) : html5
기술명(아이콘) : javascript
⬇️
<img src="https://img.shields.io/badge/html5-E34F26?style=for-the-badge&logo=javascript&logoColor=white">

<예시2>

기술명(글자) : javascript
기술명(아이콘) : html5
⬇️
<img src="https://img.shields.io/badge/javascript-E34F26?style=for-the-badge&logo=html5&logoColor=white">

---

내가 사용하려고 적어둔 뱃지👍

자바
<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://cocoon1787.tistory.com/689
https://ohksj77.tistory.com/201