[github] 내가 보려고 올리는 깃허브 리드미 뱃지로 꾸미기

 

다른 블로그들은 한 번에 이해하기가 시간이 들어서 간단하게 다시 정리해봤다.

 

깃허브에 요런 배지를 올리는 방법은 크게 simpleicons와 shields.io라는 사이트를 통해 구현할 수 있다. 

우선 위 예제의 코드는 아래와 같다. 

<div align='center'>
  <h1>Tech Stack</h1><br>
  <img alt="Python" src ="https://img.shields.io/badge/Python-3776AB.svg?&style=&logo=Python&logoColor=white"/>
  <img src="https://img.shields.io/badge/Pandas-150458?style=flat&logo=pandas&logoColor=white"/>
  <img src="https://img.shields.io/badge/tensorflow-FF6F00?style=flat&logo=tensorflow&logoColor=white"/><br>
  <img src="https://img.shields.io/badge/react-61DAFB?style=flat&logo=react&logoColor=black"> 
  <img src="https://img.shields.io/badge/node.js-339933?style=flat&logo=Node.js&logoColor=white">
  <img alt="Css" src ="https://img.shields.io/badge/CSS3-1572B6.svg?&style=flat&logo=CSS3&logoColor=white"/>
  <img src="https://img.shields.io/badge/Scikit-learn-F7931E?style=flat&logo=scikit-learn&logoColor=white"/>
  <img alt="JavaScript" src ="https://img.shields.io/badge/JavaScriipt-F7DF1E.svg?&style=flat&logo=JavaScript&logoColor=black"/>
</div>

 

 

먼저 아래 두 사이트에 모두 들어간다. 

Simple Icons - 아이콘 배지 검색하는 곳 (색상, 로고명)

https://simpleicons.org/

Simple Icons

 

Shields.io - URL 입력

https://shields.io/

Shields.io: Quality metadata badges for open source projects

 

위 두 사이트를 사용하면 되는데 결론부터 말하면 커스터마이징 (색상, 글자색 직접 정하기)을 하려면 Simple Icons라는 사이틀 주로 보면 된다. 이 Simple Icons에 들어가서 아이콘 로고명(대소문자 주의)과 색상을 복사해 와서 아래 포맷에 넣으면 끝이다. 

 

 

  <img src ="https://img.shields.io/badge/기술명(마음대로)-로고 색상(사이트). svg?&style=flat&logo=기술명(로고명)&logoColor=글자 색상"/>

 

이렇게만 보면 이해가 안 가니 Python을 예시로 뱃지를 만들려면 우선 Simple Icons 사이트에 들어가서 Python을 검색한다.  아래와 같이 Python을 검색하면 제일 첫 번째에 빨간 박스와 같이 Python이 뜬다. 

 

그럼 이제 위에서 '로고명'과 로고의 색상(#제외한 문자 - 3776AB)을 들고와서 위 형식에 넣어준다. 

<img src ="https://img.shields.io/badge/기술명(마음대로)-3776AB.svg?&style=flat&logo=Python&logoColor=글자 색상"/>

 

여기까지 했으면 사이트에서 들고올 건 끝났다. 위의 사이트 로고를 보면 파란색이니까 글자색은 흰색(white), 로고명은 Python으로 '직접' 정해주면 끝난다. 이상 끝~

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

 

 

그럼 이상으로  깃허브 로고 뱃지를 사용법에 대해 알아봤다. 간단하지만 앞으로 깃허브 레포를 새로 만들 때마다 유용하게 쓰일 것 같아 정리해봤다. 왜 이리 자세히 썼냐고 생각하는 분도 있겠지만 나 같은 뉴비를 위해 정리해봤다.

도움이 되셨다면 하트 하나 부탁드려요:)