README Header, Badge 활용 GitHub Landing Page 꾸미기

 

#github #readme #깃포트폴리오 #깃포폴

 

GitHub에 프로젝트를 올리고 README.md에 프로젝트에 대한 내용을 정리해둔다.

정리할 때 예쁘게 정리하면 더 좋을거 같은데...

 

README도 예쁘게 꾸미는 것이 가능하다.

 

1. 리포지토리 만들기

 

리포지토리 이름은 본인의 아이디와 동일하게 만들면 ✨special✨ repository를 만들 수 있다.

 

• Repository name : 본인 아이디
• Public 체크
• Add a README file 체크

대표사진 삭제

사진 설명을 입력하세요.

 

README 꾸미기 위해

방금 만든 리포지토리의 README 파일을 수정한다.

 

 

사진 삭제

사진 설명을 입력하세요.

---

1. README Header

 

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

이미지 썸네일 삭제

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

🌈 Dynamic Coloful Image Render. Contribute to kyechan99/capsule-render development by creating an account on GitHub.

github.com

 

사진 삭제

사진 설명을 입력하세요.

사용방법

https://capsule-render.vercel.app/api?

 

이 URL 끝에 쿼리 ​​매개변수를 작성하면 됩니다.

 

• Markdown

![header](https://capsule-render.vercel.app/api?type=wave&color=auto&height=300&section=header&text=capsule%20render&fontSize=90)

 

• HTML

<img src="https://capsule-render.vercel.app/api?type=wave&color=auto&height=300§ion=header&text=capsule%20render&fontSize=90" />

 

 

header의 다양한 커스텀이 존재하니... 위 링크에서 확인해보길...

 

 

사진 삭제

사진 설명을 입력하세요.

---

2. README Badge

 

사진 삭제

사진 설명을 입력하세요.

README에 뱃지를 붙일 수 있다.

 

참고사이트1. https://shields.io/

Shields.io | Shields.io

Concise, consistent, and legible badges

shields.io

참고사이트2. https://simpleicons.org/

 

사진 삭제

사진 설명을 입력하세요.

 

아래 코드에서 특정코드의 부분만 수정해서 사용하면 된다.

<img src="https://img.shields.io/badge/TypeScript-3178C6?style=flat&logo=TypeScript&logoColor=white"/>

 

• 앞 TypeScript : 아이콘 내용
• 3178C6 : 아이콘 바탕색
• 뒤 TypeScript : 아이콘 로고 지정 (simpleicons.org 사이트 참고)

 

 

사진 삭제

사진 설명을 입력하세요.

<img src="https://img.shields.io/badge/React-61DAFB?style=flat&logo=React&logoColor=white"/>

 

 

사진 삭제

사진 설명을 입력하세요.

<img src="https://img.shields.io/badge/Javascript-F7DF1E?style=flat&logo=Javascript&logoColor=white"/>