기타. 마크다운에 simple icon으로, 멋진 뱃지를 만들어보자!

필요한것

 

1. simple icons 페이지에서, 색상

 

https://simpleicons.org/ 

Simple Icons

 

2. 사용 방법

코드 전부 예시

<img src="https://img.shields.io/badge/react-61DAFB?style=for-the-badge&logo=react&logoColor=black" style="border-radius:10px">

 

 

첫째로 변경할 것은

<img src="https://img.shields.io/badge/react-61DAFB?

/badge  뒤편의 "기술스택 이름" 그리고, "컬러"

 

simple icons 에 들어가서  기술스택 이름 과 컬러를 복사해온다.

 

컬러는 # 을 빼고, 사용한다.

 

 

두번째로 변경할 것은, 뒤쪽

react&logoColor=black" style="border-radius:10px">

역시나 기술스택 이름, 그리고 logoColor = black 에서 "black" 과 "white", "green" 등 색을 결정한다.

 

 

그렇다면 최종적으로 예시를 보여준다.

<img src="https://img.shields.io/badge/react-61DAFB?style=for-the-badge&logo=react&logoColor=black" style="border-radius:10px">
<img src="https://img.shields.io/badge/next.js-000000?style=for-the-badge&logo=next.js&logoColor=white" style="border-radius:10px">
<img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=JavaScript&logoColor=white" style="border-radius:10px">
<img src="https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=HTML5&logoColor=white" style="border-radius:10px">
<img src="https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=CSS3&logoColor=white" style="border-radius:10px">
<img src="https://img.shields.io/badge/Swiper-6332F6 ?style=for-the-badge&logo=Swiper&logoColor=white" style="border-radius:10px">
<img src="https://img.shields.io/badge/MongoDB-47A248?style=for-the-badge&logo=MongoDB&logoColor=white" style="border-radius:10px">
<img src="https://img.shields.io/badge/Amazon AWS-232F3E?style=for-the-badge&logo=Amazon AWS&logoColor=white" style="border-radius:10px">

 

 

3. 확인 방법

 

마크다운으로 써서, 내가 잘 썻는지 모르겠다면, 마크다운 변환기를 이용하자.

https://www.ttmkt.com/kr/tools/markdown-to-html/

마크다운 -> HTML 간편 변환 서비스 (Markdown to HTML Converter) - TrendTalk

 

 

이렇게 써보면 바로바로 변환되어알려준다.