TOOL/Github

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

oodada 2023. 9. 20. 09:47

 

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

 

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

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

 

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

 

1. 리포지토리 만들기

 

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

 

  • Repository name : 본인 아이디
  • Public 체크
  • Add a README file 체크
대표사진 삭제

사진 설명을 입력하세요.

 

README 꾸미기 위해

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

 

 
사진 삭제

사진 설명을 입력하세요.


1. README Header

이미지 썸네일 삭제
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"/>
 

 

 

티스토리 친구하기