[Github] ReadMe 리드미 꾸미기 (및 매우 소소한 팁들)

그동안 하고 싶었던 깃허브 리드미를 드디어 간단하게 꾸며봤다.

나도 여러개의 블로그를 보면서 꾸민거라서 수정할 때 언제든지 볼 수 있도록 정리하려고 한다.

 

우선 리드미를 꾸미기 전에 가장 먼저 해야하는게 있다. 

레포지토리 만들기

내 깃허브에 들어갔을 때 나의 readme가 보이기 위해서는 레포지토리를 생성하고 그 안에 리드미 파일에서 작업을 해줘야한다.

1. new 클릭

이제 본인의 깃허브 아이디와 동일하게 입력한다. 주황색 박스에 있는 것이 내 깃허브 아이디이므로 빨간 박스에도 동일하게 입력해준다. 나는 이미 만들어져있기 때문에 존재한다고 뜨고 있다. 

그러면 이제 밑에 파란 박스에 고양이가 ✨special✨ repository 라고 소개해준다!

또한 밑에

두 개를 모두 체크 해주고 밑에 초록색 박스의 생성하기 버튼으로 레포지토리를 생성해준다!

그러면 이제 아래의 요소들로 꾸미기만 해주면 된다!

 

---

 

위에서 만든 레포지토리를 들어가보면 readme파일이 있을 것이다. 빨간색 상자 안에 있는 연필 모양을 누르면 편집이 가능하다.

---

 

1. 뱃지(Badge)

이런 기술들이나 이메일, 인스타그램 등을 저런 식으로 표현할 때 사용한다.

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

Shields.io: Quality metadata badges for open source projects

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

Simple Icons

바로 사이트1에 가서 직접 입력해서 사용하는 방법이 있지만 다 영어라서 아마 처음 사용하는 사람들은 뭘 눌러야할지 모른다. 그래서 추천하는 방법은

미리 작성된 코드에서 특정 부분만 본인이 원하는 대로 수정해서 사용하는 것이다. 

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

노란색 부분 : 아이콘의 내용을 넣는곳 (본인 마음대로 설정)

파란색 부분 : 아이콘의 바탕 색을 넣는 곳

로고의 이름 : 아이콘의 로고를 지정해주는 곳. 사이트2에 가서 찾아넣어야 함.

ex) React 를 넣고 싶다면

1. 사이트2에서 react 검색

 본인이 찾고자하는 아이콘을 찾으면 검정색 박스안에 있는 이름을 로고이름에 적어주고 밑에 색상은 위에서 파란색 부분에 적어주면 된다.

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

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

두 개의 차이점은 아이콘 내용이 다름

추가적으로 

logoColor=white 부분은 바탕색이 흰색으로 설정할 경우에 본인이 글자 색을 다른 걸로 지정할 때 사용할 수 있다.

그리고 아이콘 모양에도 여러가지가 있는데

총 5가지가 존재한다. 본인이 원하는 스타일에 맞춰서 위의 코드를 수정해주면 된다.

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

굵은 색으로 표시된 부분을 원하는 스타일에 맞게 수정. 상자 안에 있는 부분으로 변경해주면 된다.

 

---

 

2. 백준 티어 넣기

https://github.com/mazassumnida/mazassumnida

GitHub - mazassumnida/mazassumnida: Github 프로필에서 boj 프로필을 이쁘게 보여주는 프로젝트

기본 설명들이 적혀있는 주소이다. 

여러가지 타입들이 있는데 그 타입에 맞는 것을 복사에서 사용하면 된다. 

위와 같은 모양을 넣고 싶으면 빨간 박스에 있는 걸 복사에서 붙여넣기 하면 되고 다른 것들도 각 데모가 있는 것들을 위쪽에 보면 비슷하게 코드가 존재한다. 

또한 {handle}이라고 적혀있는 곳에 본인의 깃허브 주소를 넣으면 된다.

[](https://solved.ac/yoon828990)<br/>

굵은 표시 된 부분을 본인의 깃허브 아이디로 변경!

 

---

 

3. 깃허브 

방문자수

https://hits.seeyoufarm.com/

HITS

링크 접속해서 

빨간 박스 안에 본인의 깃허브 주소 넣고 

밑에는 색상 바꾸는 칸인데 색을 바꾸면 위에 예시가 바로 나오기 때문에 여러개 넣어보고 본인이 원하는 거 선택한다.

그러면 밑에 검정색 박스 3개가 있을 텐데 제일 처음 거를 복사해서 붙여넣기 해준다 

 

가장 많이 사용하는 언어

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

GitHub - anuraghazra/github-readme-stats: Dynamically generated stats for your github readmes

두 가지 버전

 

[](https://github.com/깃허브아이디/github-readme-stats)

[](https://github.com/깃허브아이디/github-readme-stats)

 

Github stats

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


위와 동일한 깃허브에서 찾을 수 있다. 테마도 다양한데 테마를 바꾸고 싶으면 마지막 부분을 수정해주면 된다.

테마 종류

테마를 dark로 하고 싶다면 마지막 부분만 theme=dark 로 수정해주면 된다!

 

---

 

4. 헤더 및 푸터

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

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


• type : 어느 타입으로 할건지

타입 종류

• color : 배경색
• height : 높이
• section : 헤더로 할건지 푸터로 할건지
• text : 내용, 띄어쓰기를 하고 싶으면 %20를 사용해야한다. 예를 들어 "깃 허브"를 쓰려면 "깃%20허브"가 되어야한다.
• fontSize : 글씨 크기
• 그외에도 Desc, 텍스트 위치, desx위치 등 다양한 것들이 있다.

그래서 내가 만든 헤더는

이렇게 만들었다! 배경색은 매번 바뀌는게 좋아서 auto로 설정해놨다. 그리고 readme에서는 가로 길이가 짧게 보일 수도 있는데 실제로 적용해보면 잘 나오기 때문에 한번 저장해놓고 확인해보길 !

---

 

추가적으로)

readme에서 이모지를 입력할 때 

https://gist.github.com/rxaviers/7360908

Complete list of github markdown emoji markup

아래 주소에서 이모지 찾은 후 옆에 코드를 복붙해서 사용해야한다. 

 

링크 걸고 싶을 때

어떤 것이든 링크를 걸고 싶다면 복사한것 양 옆으로 <a href="주소(url)">  텍스트나 뱃지 </a>을 사용하면 된다. 

ex)  <a href="url" > <h3>:muscle: Problem Solving </h3> </a>

 

제목 분류 하고 싶을 때

우선 리드미에서는 # 또는 <h> 태그를 사용해서 제목을 넣을 수 있다.

실험해보니까 동일하게 나오는 것 같다.

 # 한개
 ## 두개
 ### 세개
 #### 네개
 
 <h1>에이치원</h1>
 <h2>에이치투</h2>
 <h3>에이치쓰리</h3>
 

실행 결과

 

++) 만약 제대로 나오지 않는다면 위/아래를 한칸 띄어서 작성해보길

 

 

중간 정렬 하고 싶을 때

제일 처음에 <div align=center>

맨 마지막에 </div>를 넣어주면 된다!

---

그래서 완성된 나의 깃허브 README!

 

아직 공부하는 단계라 앞으로 조금씩 추가하면서 풍성하게 만들 예정이다!