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

Readme 만들기

깃허브 프로필을 꾸미는 Readme는 하나의 repository 입니다

new를 눌러 repository를 생성해주세요

repository name은 본인의 아이디로 해주세요!
저는 이미 hyeg0121 이라는 Readme repository를 만들었기 때문에 경고가 나옵니다
그 후에 Add a READMEFILE 에 체크하고 레포지토리를 생성합니다

레포지토리에 들어가보면 생성이 된것을 확인 할 수 있어요
연필모양을 클릭하여 수정에 들어가면

이런 코드가 보여요! 이 코드를 수정하면서 Readme를 꾸며나가는 겁니다
이 코드를 꾸밀 때 markdown 언어 혹은 HTML을 사용할 수 있는데
저는 둘 다 사용하여 Readme를 꾸며보겠습니다

Header & Footer

https://github.com/kyechan99/capsule-render

<img src="https://capsule-render.vercel.app/api?type=모양&color=색상코드&height=높이&section=header&text=텍스트&fontSize=텍스트크기" />

위 코드를 Readme에 복사 붙여넣기 하면 header를 만들 수 있습니다

<img src="https://capsule-render.vercel.app/api?type=모양&color=색상코드&height=높이&section=footer&text=텍스트&fontSize=텍스트크기" />

footer도 마찬가지 입니다.

당연하지만 한글로 써져있는 부분을 알맞게 바꿔주세요!

헤더와 푸터의 타입 종류들입니다.

참고사항

텍스트를 입력 할 때 띄어쓰기는 %20 으로 나타냅니다

컬러 코드를 기입할 때에는 #을 빼고 숫자나 영어만 씁니다

텍스트 배경이나 폰트 컬러도 지정할 수 있습니다

자세한 사항은 첨부한 링크를 참고해주세요

예시

<img src="https://capsule-render.vercel.app/api?type=waving&color=BDBDC8&height=150&section=header" />
<img src="https://capsule-render.vercel.app/api?type=waving&color=BDBDC8&height=150&section=footer" />

Readme Widgets

https://github.com/anuraghazra/github-readme-stats

Readme에 다양한 위젯을 추가 할 수 있습니다

저는 사용한 언어 비율을 나타내는 위젯을 추가해볼게요

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

본인의 깃허브 아이디만 입력하면 끝이나요 아주 간단합니다

본인의 깃허브에 대한 평판을 나타내는 위젯입니다

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

예시

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

저는 아이콘을 보여주고, 테마를 graywhite로 바꿨습니다
위에 첨부한 링크에 다양한 옵션과 테마가 있으니 참고해주세요

 

 

 

 

 

velog 글 가져오기

https://github.com/eungyeole/velog-readme-stats

velog의 특정 글을 보여주는 위젯입니다

들어가면 한국어로 설명이 되어있어서 앞서 소개한 것들보다 읽기 편하실거에요
그러니 자세한 설명은 하지 않겠습니다

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

저는 제일 최신 글을 보여주는 위젯을 설정했어요

 

 

 

 

 

badge 만들기 (shields.io)

https://simpleicons.org/

로고 아이콘과 공식 색상을 알 수 있는 사이트 입니다

<a href="링크"><img src="https://img.shields.io/badge/텍스트-색상코드?style=flat-square&logo=로고이름&logoColor=로고색"/></a>

는 링크에 연결할 때 사용하는 태그입니다. 연결할 링크가 없을 경우에는 삭제해서 사용하세요.

컬러 코드를 기입할 때에는 #을 빼고 숫자나 영어만 씁니다!

예시

<a href="https://www.instagram.com/"><img src="https://img.shields.io/badge/Instagram-E4405F?style=flat-square&logo=Instagram&logoColor=white"/></a>

 

badge 만들기 (awesome-badges)

 

https://github.com/Envoy-VC/awesome-badges

GitHub - Envoy-VC/awesome-badges: 😎 A curated list of GitHub badges for your next project

위 레포지토리에 접속하시면 많은 뱃지가 있습니다.

![js](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=JavaScript&logoColor=white)

사용할 뱃지의 url을 소괄호 안에 적으시고, 대괄호 안에는 아무 문자나 넣어주세요

 

 

 

Github Readme Streak states

http://streak-stats.demolab.com/demo/

위 링크에 들어가면 이런 창이 나옵니다 .

username에 깃허브 아이디를 써 주시고, 여러가지 옵션을 선택한 후 Markdown을 리드미에 붙여넣기 하시면 됩니다.

 

 

 

 

 

타이핑 애니메이션 넣기

https://readme-typing-svg.demolab.com/demo/

위 사이트에서 타이핑 애니메이션이 적용 된 글자를

리드미에 추가할 수 있습니다. 마찬가지로 마크다운 또는 HTML 코드를 복사 붙여넣기 하면 됩니다.

[![Typing SVG](https://readme-typing-svg.demolab.com/?lines=첫번째+줄+의+텍스트;두번째+줄+의+텍스트)](https://git.io/typing-svg)

코드로도 간단히 작성 할 수 있습니다.

 

 

 

토글 넣기

html의 detail과 summary를 이용하여 토글을 만들 수 있습니다.

<details>
<summary>
  토글 제목
</summary>
   토글 안 내용
</details>

사용 예시

<details>
<summary>
  <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Hand%20gestures/Eyes.png" alt="Eyes" width="2%" /> 내가 지금 배우는 ... 
</summary>
   <br>
  
![js](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=JavaScript&logoColor=white) ![html](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white) ![css](https://img.shields.io/badge/CSS-239120?&style=for-the-badge&logo=css3&logoColor=white) ![react](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)  
![MySQL](https://img.shields.io/badge/mysql-%2300f.svg?style=for-the-badge&logo=mysql&logoColor=white) ![java](https://img.shields.io/badge/Java-ED8B00?style=for-the-badge&logo=openjdk&logoColor=white) ![c](https://img.shields.io/badge/C-00599C?style=for-the-badge&logo=c&logoColor=white) ![python](https://img.shields.io/badge/Python-14354C?style=for-the-badge&logo=python&logoColor=white) ![kotlin](https://img.shields.io/badge/Kotlin-0095D5?&style=for-the-badge&logo=kotlin&logoColor=white) ![spring](https://img.shields.io/badge/Spring-6DB33F?style=for-the-badge&logo=spring&logoColor=white) 

</details>