[Github] Github 프로필 꾸미기✨

📄 README.md 파일 생성

1. Repositories탭에서 New버튼 클릭

2. Owner의 이름과 동일한 repository 생성
   • userid/readme.md 본인의 Github ID를 기입한다.
   • ✔ Add a README file 체크!

3. userid/readme.md 파일이 추가된 것을 확인할 수 있다.

4. readme.md 파일을 수정하여 프로필 꾸미기 👑

GitHub Docs

상단 이미지 추가하기

• 오픈소스 https://github.com/kyechan99/capsule-render

📃 소스코드

![header](https://capsule-render.vercel.app/api?type=waving&&color=gradient&customColorList=0,2,2,5,30&height=280&section=header&text=Hi%20there,%20I'm%20Yuhui.&fontSize=60&animation=fadeIn&desc=Yuhui's%20Dev%20Blog&descSize=16&descAlign=70)

📝 적용결과

상세설명

위의 오픈소스를 활용하여 간단하게 만들 수 있다. URL에 ​​매개변수 parameter를 적용하면 된다.

• Types 변경
  • &type=waving 등으로 배경이미지 유형을 변경할 수 있다.

    ![header](https://capsule-render.vercel.app/api?type=waving)
    

• Background Color 변경
  • &color=auto와 &color=gradient를 비교하여 내 마음에 드는 gradient를 적용했다.

    ![header](https://capsule-render.vercel.app/api?&color=gradient)
    

• Custom Color List
  • auto값 뿐만아닌 사용자 정의 색상 커스텀을 제공한다.
  • &customColorList=0,2,3과 같이 idx값을 넣어주면 된다.
  • 예를들어 idx=2를 더 많이 보여주고 싶은 경우, &customColorList=0,2,2,2,2,3과 같이 커스텀이 가능하다.

    ![header](https://capsule-render.vercel.app/apicolor=gradient&customColorList=0,2,2,5,30)
    

• Text
  • 이미지 위에 텍스트 입력 text=텍스트
  • +는 %2B로, 공백은 %20로 치환하여 사용한다. 공백만 사용하는 것을 권한다.

    ![header](https://capsule-render.vercel.app/api?text=Hi%20there,%20I'm%20Yuhui.)
    

• FontSize
  • fontSize=60 기본값=70, px는 쓰지 않는다.

    ![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontSize=40)
    

• Desc
  • 기본 텍스트가 아닌 추가설명 입력 &desc=설명

    ![header](https://capsule-render.vercel.app/api?text=Hi%20there,%20I'm%20Yuhui.&fontSize=60&desc=Yuhui's%20Dev%20Blog)
    

• Section
  • &section=header가 기본값이며 &section=footer 적용 가능

    ![footer](https://capsule-render.vercel.app/api?section=footer)
    

• Height
  • 이미지 사이즈 변경 &height=, 기본값=120
• DescSize
  • 설명 텍스트의 사이즈 변경 &descSize=16
• DescAlign
  • 설명 텍스트 위치 변경 &descAlign=73
• Text Animation 효과
  • &animation=twinkling 적용. fadeIn, scaleIn, blink, blinking, twinkling

상단 타이핑 이미지 추가

• README 상단을 꾸밀 수 있는 SVG 이미지 생성기
• 데모사이트 https://readme-typing-svg.herokuapp.com/demo

📃 소스코드

[![Typing SVG](https://readme-typing-svg.herokuapp.com?font=Kanit&size=26&color=9600F7&center=true&lines=Hi+there%F0%9F%91%8B%2C+I'm+Yuhui+Seo.)](https://git.io/typing-svg)

📝 적용결과

GitHub stats 표시하기

1. README.md에 아래 코드를 추가한다.
   • 사용자ID 부분에 본인 github id를 적어준다.

📃 소스코드

![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=사용자ID&show_icons=true&theme=radical)

📝 My Github Stats

뱃지 추가하기

• https://github.com/Ileriayo/markdown-badges

📃 샘플 소스코드

![로고명](https://img.shields.io/badge/로고명-원하는색상코드.svg?&style=원하는스타일&logo=로고명또는simpleicons에서아이콘이름&logoColor=로고색상)

📃 소스코드

![Python](https://img.shields.io/badge/Python-3766AB.svg?&style=flat-square&logo=Python&logoColor=white)

style 옵션

• ?style=flat (기본값)
• ?style=flat-square
• ?style=plastic
• ?style=for-the-badge
• ?style=social

언어 사용량 통계 나타내기

• https://github.com/anuraghazra/github-readme-stats
• ?username=값을 GitHub 사용자 이름으로 변경한다.
• 테마 변경 &theme=
  • dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontrast, dracula

📃 소스코드

![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=깃허브아이디&layout=레이아웃스타일&theme=스타일)

📝 적용결과

방문자수 표시하기

• https://hits.seeyoufarm.com

MD파일 가운데 정렬

<div align="center"> </div>