Github Readme 꾸미기 총정리

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

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

발표 목표는..

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

그럼.. 시작해보자

1. 레포지토리 생성
   

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

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

🧤 기본 작성

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

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

🛳 Badge (뱃지)

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

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

방법1
https://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>

ex.

<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/ 로 가서 만들기

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

ex.

<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
-> 리드미에 더 구체적인 사용법들이 있다

기본버전 (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

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

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

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

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

• 깃허브 평가 (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

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

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

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

완성

Link

약 일년간 리드미만 300커밋 넘게 했다
진짜 많이 바꾸고 바꾸다가 현재 정착한 형태

중복되는 내용 없이 내가 말하고싶은 모든 내용을 담으면서도 가능한 짧고 간결하게 만들어지기를 원해서 조금 과하게 산만해졌는데....

내 구릿구릿한 디자인감각으로는 이게 최선이다

내 깃허브 최고 포크 가 리드미에서.. 나오다니..
웃프네...😂