Home [Github] 깃허브 리드미 꾸미기
Post
Cancel

[Github] 깃허브 리드미 꾸미기

GitHub에 처음 들어갔을 때 보이는 Profile인 Readme를 꾸미기위한 모든 것을 정리했습니다. 리드미 파일에서는 html과 마크다운 문법을 모두 사용할 수 있습니다.

0️⃣ 프로필 Readme용 Repository 생성

  • 깃허브 아이디와 동일한 이름의 레포지토리 만들기 (✨special ✨ repository 생성 가능)
  • Add README file 체크하기

Image

헤더 이미지 적용 : https://github.com/kyechan99/capsule-render

1
<img src="https://capsule-render.vercel.app/api?type=모양&color=색상코드&height=높이&section=header&text=텍스트&fontSize=텍스트크기" />
1
![header](https://capsule-render.vercel.app/api?type=wave&color=auto&height=300&section=header&text=capsule%20render&fontSize=90)

2️⃣ Badge

뱃지 생성 : https://shields.io/

로고 이미지 : https://simpleicons.org/

만들어진 뱃지 : https://github.com/Envoy-VC/awesome-badges

1
2
3
4
5
# 일반 뱃지
 <img src="https://img.shields.io/badge/텍스트-바탕색?style=스타일이름&logo=로고이름&logoColor=로고색"/>

# 링크 연결되는 뱃지
<a href="링크"><img src="https://img.shields.io/badge/텍스트-바탕색?style=스타일이름&logo=로고이름&logoColor=로고색"/></a>
1
![아무뱃지이름](https://img.shields.io/badge/내용-바탕색?style=스타일이름&logo=로고이름&logoColor=로고색)

3️⃣ Widget

Github 가장 많이 사용한 언어 / stats / 저장소 핀 : https://github.com/anuraghazra/github-readme-stats

1
2
3
4
5
<img src="https://github-readme-stats.vercel.app/api/top-langs/?username=깃허브아이디&layout=compact&theme=테마이름">

<img src="https://github-readme-stats.vercel.app/api?username=본인아이디&show_icons=true&theme=테마이름">

<img src="https://github-readme-stats.vercel.app/api/pin/?username=깃허브아이디&repo=레포지토리이름&theme=테마이름">
1
2
3
4
5
![Top-Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=깃허브아이디&layout=compact&theme=테마이름)

![GitHub-stats](https://github-readme-stats.vercel.app/api?username=깃허브아이디&show_icons=true&theme=테마이름)

![Readme-Card](https://github-readme-stats.vercel.app/api/pin/?username=깃허브아이디&repo=레포지토리이름&theme=테마이름)

4️⃣ 백준 티어

백준 티어 프로필 : https://github.com/mazassumnida/mazassumnida

1
[![Solved.ac-Profile](http://mazassumnida.wtf/api/generate_badge?boj=백준아이디)](https://solved.ac/백준아이디)

5️⃣ 기타 사이트

타이핑 애니메이션 : https://readme-typing-svg.demolab.com/demo/

3D 잔디 적용 방법1 : https://h-owo-ld.tistory.com/264

3D 잔디 적용 방법2 : https://soooom.tistory.com/436

움직이는 이모지 : https://animated-fluent-emoji.vercel.app/

리드미 이모지 입력 : https://gist.github.com/rxaviers/7360908

그라데이션 색상 팔레트 : https://uigradients.com/#VeryBlue

컬러 팔레트 : https://mybrandnewlogo.com/ko/color-palette-generator

백준 solved.ac 잔디 추가 : https://github.com/mazassumnida/mazandi

Github 커밋 시간대 : https://github.com/techinpark/productive-box

Github 방문자 수 : https://hits.seeyoufarm.com/

Github Contribution 스트릭 : https://github.com/DenverCoder1/github-readme-streak-stats

Github Contribution 그래프 : https://github.com/ashutosh00710/github-readme-activity-graph

This post is licensed under CC BY 4.0 by the author.