Github 프로필 기술 스택 아이콘 꾸미기

 

양식

아래와 같은 코드를 삽입하면 해당 기술 스택 뱃지가 생성된다. 

<img src="https://img.shields.io/badge/[기술명]-[배경색]?style=[모양]&logo=[아이콘명]&logoColor=[글자색]"/>

기술명, 배경색, 모양, 아이콘, 글자색

위 항목들을 본인이 원하는 스택에 맞게 변경해서 삽입하면 된다.

아래 자세하게 설명해두었습니다.

 

예시

<img src="https://img.shields.io/badge/Typescript-3178C6?style=flat&logo=typescript&logoColor=white"/>
<img src="https://img.shields.io/badge/AWS-232F3E?style=for-the-badge&logo=amazon%20aws&logoColor=black"/>

---

1. 기술명

본인이 넣고 싶은 이름 넣으면 된다. 양식은 없다. 

 

2. 배경색 / 4. 아이콘 명

https://simpleicons.org/

위 사이트에서 아이콘과 그에 맞는 색상 코드를 얻을 수 있다. 

배경색 - 좌측 하단 색상 코드를 '#' 제외하고 입력하면된다.

코드 클릭시 클립보드에 자동으로 복사된다.

아이콘명 - 위 이미지처럼 표시된 이름을 소문자로 입력하면 된다. 

 

아이콘 이름에 띄어쓰기가 포함된 경우,

띄어쓰기는 '%20' 으로 사용하면 된다.

ex) ruby on rails => ruby%20on%20rails

 

3. 모양

5가지 옵션이 있다. 

• platic

• flat

• flat-squre

• for-the-badge

• social

 

5. 글자색

폰트 색상이다. 아래 두 가지 옵션 중에서 선택해서 입력하면 된다.

options : "black" / "white"