[Github] 깃허브 프로필을 꾸며보자

본인 닉네임 레포지토리를 만들면 자동으로 REAME.md 파일이 등록됩니다.

 

 

사진에 적혀있는 것처럼 special 레포이고, REAME.md를 추가하고 public으로 초기 세팅해야 합니다!!

 

처음에 만들면 아래의 README.md가 채워져있습니다.

 

이제 여기에 글을 작성해서 깃허브 프로필을 꾸며봅시다! 😊

 

다른 블로그들을 참고해서 해보았는데, 괜찮아보이는 것은 아래 두 개였습니다. 다른 것들도 많으니 다른 블로그도 참고해보세요!

1. 뱃지를 다는 것
2. Github Stats를 넣는 것

최종적으로는 뱃지만 달긴 했지만 설명은 적어두겠습니다.

 

 

---

Shields.io 를 통해 뱃지 달기

 

 

사이트에 들어가서 Get started를 누르면 문서가 나옵니다.

 

<img alt="Static Badge" src="https://img.shields.io/badge/label-message-blue">

위의 뱃지를 나타내는 것입니다.  라벨과 메세지를 나누고 싶으면 dash ( `-` ) 로 나누면 됩니다.

 

<img alt="Static Badge" src="https://img.shields.io/badge/라벨-메세지-색상">

라벨, 메세지, 색상에 본인이 원하시는 것으로 넣으면 됩니다.

 

---

 

<img alt="Static Badge" src="https://img.shields.io/badge/just_message-blue">

위의 뱃지를 나타낸 것입니다. 띄어 쓰기는 underscore( _ ) 나 %20으로 적으시면 됩니다.

 

<img alt="Static Badge" src="https://img.shields.io/badge/메세지-색상">

 

메세지, 색상을 본인이 원하시는 것으로 넣으시면 됩니다.

 

---

 

로고, 로고 색상도 넣을 수 있습니다.

 

Simple Icons

Simple Icons

위 사이트에서 원하는 아이콘을 찾고, 제목을 클릭하면 해당 아이콘의 Brand slug가 복사됩니다.

 

 

저는 아이콘을 계속 눌렀는데 HTML이 나와서... 여기 SimpleIcon 의 slugs.md를 확인했는데요.

확인해보니 저 아래의 제목을 누르는 것이더라구요. 다들 저처럼 헷갈리지 않으셨으면 좋겠습니다. 🥲

 

 

<img alt="Static Badge" src="https://img.shields.io/badge/label-message-blue?logo=tistory&logo-color=FFFFFF">

 

쿼리파라미터로 뒤에 붙여주면 됩니다.

 

<img alt="Static Badge" src="https://img.shields.io/badge/label-message-blue?logo=복사한 Brand Slug&logo-color=로고 색상">

 

 

---

style도 차이가 있는데 상하좌우 패딩 차이입니다.

style 차이

출처: https://github.com/psincraian/pepy/issues/208

 

 

---

 

링크 달기

 

뱃지를 누르고 원하는 사이트에 이동시키고 싶다면 다음과 같이 하면 됩니다.

 

공부방

<a href="넣을 링크" target="_blank">
  <img alt="Static Badge" src="https://img.shields.io/badge/메세지-색상?logo=로고&style=스타일">
</a>

 

메세지, 색상, 로고, 스타일, 넣을 링크에 원하는 값을 넣으면 됩니다.

 

---

Stat 추가하기

이렇게 생긴 것인데 

REAME.md에 아래의 줄을 입력하면됩니다.

![제목](https://github-readme-stats.vercel.app/api?username=깃헙 ID&show_icons=true&theme=테마)

제목, 깃헙 ID, 테마는 원하시는 것으로 수정하시면 됩니다.

지정가능한 테마 : https://github.com/anuraghazra/github-readme-stats/blob/master/themes/README.md

 

---

 

저의 최종 READMD.md 파일입니다.

## 안녕하세요

<a href="https://minstudy.tistory.com" target="_blank">
  <img alt="Static Badge" src="https://img.shields.io/badge/tistory-blue?logo=tistory&style=for-the-badge">
</a>

 

 

 

이제 기술 스택들도 하나씩 늘려보려고 합니다.

꾸미는게 재밌네요!! ✨✨✨✨

 

---

추가로 기술 스택 뱃지를 달 때, 아래 뱃지들이 있는 곳에서 확인하면 더 빠를 것 같습니다!

 

https://github.com/digitalinnovationone/dio-lab-open-source/blob/main/utils/badges/badges.md

 

위의 링크로 마크다운으로 했더니 굉장히 빠르게 끝났습니다

 

## 안녕하세요

[![Tistory](https://img.shields.io/badge/Tistory-ed5207?style=for-the-badge&logo=tistory&logoColor=white)](https://minstudy.tistory.com)
[![Gmail](https://img.shields.io/badge/Gmail-333333?style=for-the-badge&logo=gmail&logoColor=red)](mailto:mins.choi214@gmail.com)

![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)
![Python](https://img.shields.io/badge/python-3670A0?style=for-the-badge&logo=python&logoColor=ffdd54)

![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)
![React Native](https://img.shields.io/badge/React_Native-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)
![Next](https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white)

![PostgreSQL](https://img.shields.io/badge/PostgreSQL-000?style=for-the-badge&logo=postgresql)

![AWS](https://img.shields.io/badge/AWS-000.svg?style=for-the-badge&logo=amazon-aws&logoColor=white)
![GoogleCloud](https://img.shields.io/badge/GoogleCloud-%234285F4.svg?style=for-the-badge&logo=google-cloud&logoColor=white)