Github [정보 : Github 뱃지작성방법]

가끔 깃허브를 돌아보면 이렇게 뱃지를 이용해서 보기좋게 stack이 정리가 되어 있는 경우를 볼 수 있다.

 

 

이렇게 뱃지를 통하여 종리를 하면 가독성이 좋아지는 장점을 가지고 있으므로 프로젝트를 할때나 나를 소개할때 이런 스택을 가지고 있습니다. 하고 소개하기 좀더 좋아보여서 이참에 제대로 하는 방법을 배워서 포스팅을 하기로 하였다.

 

심플아이콘

https://simpleicons.org/

심플 아이콘 사이트를 가면

이렇게 보이실 겁니다.

만약 나는 Node.js뱃지를 만들고 싶다하면, Search 부분에 'Node'을 검색하면

이렇게 뜨는데요.

여기서 필요한 건 색상 코드입니다.

 

이름과 색상 코드를 복사를 해줍니다.

그리고 저희가 사용할 코드는 아래의 코드입니다.

<img src="https://img.shields.io/badge/표시할이름-색상?style=for-the-badge&logo=기술스택아이콘&logoColor=white">

• 위의 코드에 '표시할이름' 자리에 'Node.js'을 적어줍니다.
• '색상' 자리에 복사한 색상 코드를 넣어줍니다.( #은 빼야함)
• '기술스택아이콘' 자리에 기술 이름을 넣으면 아이콘이 들어갑니다.(아래 사진 참고)

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

결과

하나 더 추가하자면

마지막 'white' 부분은 logo color를 설정해주는 부분입니다.

그래서 white로 했기 때문에 아이콘이 화이트 색상으로 들어갑니다.

 

뱃지를 여러개 넣는 방법

<div>태그를 이용해서 그룹하여서 넣을수 있습니다.

align속성을 이용해서 정렬을 설정할수 있습니다.

<div align=left> 
    <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=JavaScript&logoColor=white">
    <img src="https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=React&logoColor=white">
    <img src="https://img.shields.io/badge/Node.js-339933?style=for-the-badge&logo=Node.js&logoColor=white">
    <img src="https://img.shields.io/badge/Express-000000?style=for-the-badge&logo=Express&logoColor=white">
    <img src="https://img.shields.io/badge/MySQL-4479A1?style=for-the-badge&logo=MySQL&logoColor=white">
    <img src="https://img.shields.io/badge/Sequelize-52B0E7?style=for-the-badge&logo=Sequelize&logoColor=white">
    <img src="https://img.shields.io/badge/Amazon AWS-232F3E?style=for-the-badge&logo=Amazon AWS&logoColor=white">
</div>

 <div align=middle>

<div align=left>

<div align=middle>

<div align=right>