깃허브 꾸미기 Readme 꾸미기

어느정도 프로젝트가 안정되어서 할 일이 적어졌을 때에는 깃허브 저장소를 꾸미고 싶어지는 욕구가 생기기 마련입니다.

오늘은 그 방법에 대해서 포스팅 하겠습니다

위와 같이 Readme 를 꾸미는 두 가지 방법을 알아보려고 합니다. (public 으로만 해야하는 자신의 개인 프로필과는 다른, private 에도 할 수 있는 방법입니다)

1. Capsule Render

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

[Capsule-Render

capsule-render.vercel.app](https://capsule-render.vercel.app/)

해당 페이지에서 타입(테마)을 정하고, 색상과 사용할 텍스트 등을 고릅니다. 글자에 애니메이션을 줄 수도 있습니다.

+ 헤더에 사용할 것인지, 푸터에 사용을 할 것인지 정하면 우측에 미리보기와 링크가 생성됩니다

해당 링크를 복사하고,
![header]()
괄호 안에 복사된 링크를 넣습니다

ex)


다음과 같은 형태의 문자열을 Readme 를 열어 복붙하고 Preview 를 통해 제대로 작동하는지 확인합니다

2. 뱃지 만들기 (Simpleicons)

https://simpleicons.org/

[Simple Icons

3076 Free SVG icons for popular brands

simpleicons.org](https://simpleicons.org/)

해당 사이트를 방문하고, nginx 를 검색해보겠습니다

검색 결과에 미리보기 아이콘이 뜨지 않는다고 당황하지 마세요. 다시 검색해보면 뜹니다. (로딩 속도 문제인듯)

'NGINX' 텍스트를 클릭해 아이콘 이름을 복사할 수 있고, 색상코드를 클릭해 색상코드를 복사할 수 있습니다

기본 틀


ex)


주의할 점

1. 색상코드를 복사하면 #009639 와 같이 복사가 되는데, # 은 지워주세요

2. 귀찮으면 노란색은 yellow 와 같이 써도 됩니다

3. 괜찮은 색상을 보려면 저는 이 사이트를 참고합니다

저는 README 를 이렇게 작성했습니다

# README

![header](https://capsule-render.vercel.app/api?type=venom&color=0:8871e5,100:b678c4&height=300&section=header&text=나의저장소&fontSize=90)

![Rails](https://img.shields.io/badge/rubyonrails-D30001?style=for-the-badge&logo=rubyonrails&logoColor=white)
![JS](https://img.shields.io/badge/javascript-yellow?style=for-the-badge&logo=javascript&logoColor=white)
![Ruby](https://img.shields.io/badge/ruby-CC342D?style=for-the-badge&logo=ruby&logoColor=white)
![mysql](https://img.shields.io/badge/mysql-4479A1?style=for-the-badge&logo=mysql&logoColor=white)
![amazonec2](https://img.shields.io/badge/amazonec2-FF9900?style=for-the-badge&logo=amazonec2&logoColor=white)
![amazons3](https://img.shields.io/badge/amazons3-569A31?style=for-the-badge&logo=amazons3&logoColor=white)
![amazonrds](https://img.shields.io/badge/amazonrds-527FFF?style=for-the-badge&logo=amazonrds&logoColor=white)
![amazonroute53](https://img.shields.io/badge/amazonroute53-8C4FFF?style=for-the-badge&logo=amazonroute53&logoColor=white)
![awslambda](https://img.shields.io/badge/awslambda-FF9900?style=for-the-badge&logo=awslambda&logoColor=white)
![googleanalytics](https://img.shields.io/badge/googleanalytics-E37400?style=for-the-badge&logo=googleanalytics&logoColor=white)
![jquery](https://img.shields.io/badge/jquery-0769AD?style=for-the-badge&logo=jquery&logoColor=white)
![dotenv](https://img.shields.io/badge/dotenv-FFB000?style=for-the-badge&logo=dotenv&logoColor=white)
![nginx](https://img.shields.io/badge/nginx-009639?style=for-the-badge&logo=nginx&logoColor=white)
![cloudflare](https://img.shields.io/badge/cloudflare-F38020?style=for-the-badge&logo=cloudflare&logoColor=white)
![filezilla](https://img.shields.io/badge/filezilla-BF0000?style=for-the-badge&logo=filezilla&logoColor=white)
![letsencrypt](https://img.shields.io/badge/letsencrypt-003A70?style=for-the-badge&logo=letsencrypt&logoColor=white)
![stripe](https://img.shields.io/badge/stripe-008CDD?style=for-the-badge&logo=stripe&logoColor=white)
![git](https://img.shields.io/badge/git-F05032?style=for-the-badge&logo=git&logoColor=white)

 

 

결과물