저번에는 깃허브 프로필을 꾸미는 방법에 대해서 알아봤다.

더 나아가 오늘은 사람들이 많이 꾸미는 방법에 대해서 알아보자.

스킬뱃지

깃허브를 꾸미는 대부분의 사람들을 보면 프로필에 아래와 같은 네모난 블록이 많다.

주로 스킬뱃지라고 불리는 이 뱃지들은 사용자가 보유한 기술 스택 등을 보여줄 수 있으며 다양한 모양으로 꾸밀 수 있어서 사람들이 많이 사용한다.

오늘은 이 스킬 뱃지를 만드는 방법을 포스팅 해보자

첫 번째로, 스킬뱃지를 만드는 방법은 아래 사이트에서 알려주는 방법으로 만든다.
https://shields.io/

다음으로는 아래와 같은 형식을 README에 넣어주면 뱃지가 생긴다.

<img src="https://img.shields.io/badge/(내용)-(배경 색상)?style=for-the-badge&logo=(로고이름)&logoColor=(로고 색상)">

(내용) - 표시하고 싶은 내용을 입력
(배경 색상) - 표시하고 싶은 배경의 색상을 입력
(로고 이름) - 표시하고 싶은 로고의 이름을 입력
(로고 색상) - 표시하고 싶은 색상을 입력

https://simpleicons.org/?q=sass 이 사이트에 들어가면 내가 원하는 로고와 색상을 검색해서 다 알 수 있다.

이 사진에서 HTML5 부분이 로고 이름이고, 그 아래 #E34F26 이 부분이 로고 색상이다.

또한 로고의 색상을 넣을 때에는 #를 빼고 적어야 적용이 된다.

예) #E34F26 이면 E34F26으로 작성

위에는 내가 만든 스킬 뱃지이고, 이 뱃지들의 소스는 아래와 같다.

<img src="https://img.shields.io/badge/HTML-98FB98?style=fot-the-badge&logo=HTML5&logoColor=E34F26">
<img src="https://img.shields.io/badge/CSS-98FB98?style=fot-the-badge&logo=CSS3&logoColor=1572B6">
<img src="https://img.shields.io/badge/Java Script-98FB98?style=fot-the-badge&logo=JavaScript&logoColor=F7DF1E">

오늘은 스킬 뱃지 만드는 방법을 배워봤다.

다음에는 다른 방법으로 깃허브 꾸미는 법을 알아보자.