Github Readme 꾸미기 총정리 🎨

 

 

 

 

 

---

사실 내 첫 코딩(이라고 말하기는 부끄럽지만)은 깃허브 리드미였다
html 기본 태그도 모르는 상태로 유목민마냥 여러 블로그들을 떠돌아다니며 열심히 복붙하던 나날들.....

 

한번 정리해보고 싶었지만 시간을 감히 내지 못하고 있었는데
마침 첫 GDSC 세션 발표를 맡게 되어 이렇게 기본적이면서도 재미있는(?) 내용을 다루게 되었다

 

발표 목표는..

• 입문자들에게는 친절하게 알려드리기
• 이미 알고있는 분들에게도 쓸모있는 정보를 제공하기

그럼.. 시작해보자

---

 

1. 레포지토리 생성

 

2. 내 아이디와 똑같은 레포지토리 만들기

 

3. 깃허브 표지에 나오는 특별한 리드미

 

---

🧤 기본 작성

마크다운 언어 (+ Github Flavored Markdown) 를 이용하여 작성

Markdown 기본문법

 

• html에서 사용하는 <img /> <a> </a> <div> </div> 등의 태그들을 사용 가능하다
• width align 속성들을 이용해서 이미지나 후술할 위젯들의 사이즈나 정렬을 조절할 수 있음

 

---

🛳 Badge (뱃지)

• 기술 스택이나 사용 툴 등을 간결하게 표현하고 싶을 때
• 인스타, 블로그 등 다양한 바로가기 링크들을 깔끔하게 나타내고 싶을때
• 로고와 공식컬러를 포함한 예쁜 아이콘 뱃지

 

공식 로고 색상과 정확한 로고 이름 모아보는 사이트
https://simpleicons.org/

Simple Icons

 

 

방법1
https://shields.io/ 사이트에 가서 직접 커스텀하기

Shields.io | Shields.io

 

방법2
아래 코드 복사해서 적절히 변형하기

<img src="https://img.shields.io/badge/이름-색상코드?style=flat-square&logo=로고명&logoColor=로고색"/>

• 이름 : 뱃지에 쓸 이름(내용)
• 색상코드 : # 제외하고 입력 (ex. #FFCA28 -> FFCA28)
• 로고명 : 아이콘 이름 정확하게 입력
• 로고색 : 로고의 색깔 (보통 뱃지 배경이 흰색이라면 검은색으로, 그 외에는 흰색으로 설정)

 

예시

<img src="https://img.shields.io/badge/Firebase-FFCA28?style=flat-square&logo=firebase&logoColor=white"/>

 

 

뱃지에 링크걸기

-> <a> </a> 태그 이용

 <a href="링크"><img src="위에있는뱃지코드"/></a>

 

예시

<a href="https://velog.io/@seondal"><img src="https://img.shields.io/badge/Velog-3DDC84?style=flat-square&logo=Blogger&logoColor=white"/></a>

 

 

적용예시

내가 처음으로 꾸몄던 리드미..

 

---

 

👥 방문자수

https://hits.seeyoufarm.com/ 로 가서 만들기

HITS

 

• Target URL : 방문자를 조회할 페이지의 링크 (블로그나 깃허브 모두 자유롭다)
• Add Icon : 로고를 선택하여 넣을 수 있다
• 그외는 미리보기가 있어서 쉽게 설정 가능

 

예시

<a href="https://github.com/seondal"><img src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Fseondal&count_bg=%23000000&title_bg=%23000000&icon=github.svg&icon_color=%23E7E7E7&title=GitHub&edge_flat=false)"/></a>

---

 

🏆 백준 티어 리드미에 보여주기

정확히는 solved.ac 의 티어를 시각적인 효과로 보여주는..

 

mazzassumnida 프로젝트
https://github.com/mazassumnida/mazassumnida

반응형

-> 리드미에 더 구체적인 사용법들이 있다

GitHub - mazassumnida/mazassumnida: Github 프로필에서 boj 프로필을 이쁘게 보여주는 프로젝트

 

기본버전 (v.2.0)

[![Solved.ac
프로필](http://mazassumnida.wtf/api/v2/generate_badge?boj=백준아이디)](https://solved.ac/백준아이디)

 

작은버전 (mini)

[![Solved.ac
프로필](http://mazassumnida.wtf/api/mini/generate_badge?boj=백준아이디)](https://solved.ac/백준아이디)

 

---

 

🌱 Solved.ac 잔디 깃허브 프로필에 보여주기

 

mazzassumnida 팀의 mazandi 프로젝트
https://github.com/mazassumnida/mazandi

GitHub - mazassumnida/mazandi: ✅ solved.ac 잔디를 예쁘게 보여주는 프로필 카드 API

 

  <img src="http://mazandi.herokuapp.com/api?handle={백준닉네임}&theme=warm"/>

 

---

 

🪣 다양한 리드미 위젯 사용하기

 

anraghazra님의 github-readme-stats 프로젝트
https://github.com/anuraghazra/github-readme-stats

GitHub - anuraghazra/github-readme-stats: :zap: Dynamically generated stats for your github readmes

 

깃허브 리드미 뱃지계의 혁명..

• 깃허브 평가 (github stats card)
• 레포 핀 추가
• 자주 사용한 언어
• 기술별 사용시간

..등 정말 다양한 위젯들이 있다

 

Top Languages card

: 깃허브 리드미에 자주 사용한 언어를 보여준다 (Most Used Langauages)

• 특정 언어를 제외시키거나, 특정 레포지토리를 제외시키거나, 보이는 언어의 개수를 조정 등 구체적인 설정도 가능하다
• 작은 버전으로 크기를 바꿀수도 있고 테마도 변경 가능

-> 위에 링크된 프로젝트 리드미에 자세히 설명되어있음

 

[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=깃허브아이디)](https://github.com/깃허브아이디/github-readme-stats)

 

Github stats

: 깃허브 리드미에 깃허브에 대한 평가를 보여준다

• star, pull-request, issue 개수들을 보여주기 때문에 뿌듯함
• 평가는 대체로 A+이 나오는 것 같다.. 기준은 잘 모르겠지만 매우 후함..

[![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=깃허브아이디)](https://github.com/깃허브아이디/github-readme-stats)

 

---

 

👟 리드미 헤더와 푸터 꾸미기

 

kyechan99 님의 capshule render 프로젝트
https://github.com/kyechan99/capsule-render

GitHub - kyechan99/capsule-render: 🌈 Dynamic Coloful Image Render

 

마찬가지로 위 링크를 들어가서 리드미를 보면 정말 디테일한 커스텀이 가능하다

 

Header

![header](https://capsule-render.vercel.app/api?type=모양&color=auto&height=높이&section=header&text=텍스트&fontSize=폰트크기)

• 모양 : wave, egg, shark, slice, rect, soft, rounded, sylinder, waving, transparent 등
• 높이 : 높이 (단위없음)
• 텍스트 : 내용 (띄어쓰기는 %20 으로 작성)
• 폰트크기 : 텍스트의 크기 (단위없음)

 

Footer

![Footer](https://capsule-render.vercel.app/api?type=waving&color=auto&height=200&section=footer)

 

---

 

🌿 벨로그 포스팅 리드미에 보여주기

 

engyeole 님의 velog-readme-stats
https://github.com/eungyeole/velog-readme-stats

GitHub - eungyeole/velog-readme-stats: Velog 포스트로 Github를 꾸며보자!

 

[![Velog's GitHub stats](https://velog-readme-stats.vercel.app/api?name=벨로그아이디)](벨로그링크)

 

---

 

완성

GitHub - seondal/seondal

 

진짜 많이 바꾸고 바꾸다가 현재 정착한 형태

 

중복되는 내용 없이 내가 말하고싶은 모든 내용을 담으면서도

가능한 짧고 간결하게 만들어지기를 원해서 조금 과하게 산만해졌는데....

 

일단은.. 이렇게...!

 

---

깃허브 != 이력서

깃허브가 포트폴리오가 될 수는 있지만 이력서가 될 수는 없습니다!

이력서와 포트폴리오의 차이 및 개발자 이력서 양식은 아래 글을 참고해주세요 :)

 

[_/코딩안함] - [깔끔한 이력서] 기업에 포트폴리오와 이력서를 따로 제출하는 이유 (경력기술서 예시, 레쥬메 템플릿, CV 양식 공유)

[깔끔한 이력서] 기업에 포트폴리오와 이력서를 따로 제출하는 이유 (경력기술서 예시, 레쥬메