깃허브 README 꾸미기

최근에 하던 프로젝트가 마무리 단계라서
깃허브 README를 작성하게 됐는데,

다른 프로젝트에서 같이 작업한 Z세대분이
프로젝트 README를 기깔나게 만드신 걸 보고
소스를 뜯어서 좀 봤다.

그래서 기록겸 도움 되시라고 정리를 해보려 한다.

(마크다운 문법은 다루지 않는다)

---

중앙 정렬

마크다운은 태그를 사용할 수 있기 때문에, 다음과 같은 방법으로 중앙 정렬을 할 수 있다.

<div align="center">

# ☕ 치얼-쓰 커피 (Cheers Coffee) ☕

</div>

중요한 점은 공백을 하나 더 띄워야 한다.
그래야 제목1(#)이 적용된다.

단순히 제목 뿐만 아니라 div안에 원하는만큼 넣으면 된다.

---

이모지 적극 활용하기

이게 되게 민망한 말이긴 한데
애플 아이콘이 좀... Z세대스럽다.
(이런 말을 하는 내 모습이 안타깝다)

아무튼 이모지를 어디서 보느냐

이모티콘 목록 : 아이폰 OS와 안드로이드의 기본 이모티콘 기호

들어가서 여러 이모지를 써보도록 하자.

## 👋 소개 

개발자들에게 따뜻한 커피와 함께 풍족한 야근을 선물해주세요 💜 <br>
보낸 커피는 개발자의 가상지갑에 전달됩니다. 🤑

## 🌳 사용 방법

### 🙆 공통 🙆‍♀️
메타마스크가 설치 되어야 합니다.

### 👨‍💼 보내는 사람
1. 보내고자 하는 사람의 링크로 접속합니다.

---

배지(Badge) 사용하기

요새 깃허브 프로필이나 README를 보면
이렇게 생긴 친구들이 있다.

이건 어디서 가져오나 했는데,
사이트가 따로 있었다.

Shields.io: Quality metadata badges for open source projects

내용을 읽으면 복잡해서 실제 코드를 가지고 설명하겠다.
자세한 내용과 바리에이션은 위의 링크를 들어가서 읽어보자.

<img src="https://img.shields.io/badge/React-41BADB?style=flat-square&logo=react&logoColor=white" />

<img src="https://img.shields.io/badge/: 고정
React-41BADB: 텍스트-배경색. 예) Goldfish-000000: Goldfish가 적힌 검은 배경의 배지
style=flat-square: 평면 사각형 모양
logo: 로고 이름. *아래 사이트 참고*
logoColor: 로고 색상

여기서 logo와 배경색에 해당하는 부분은 아래의 사이트에서 찾으면 된다.

Simple Icons

(들어가면 한동안 로딩하느라 검색이 안 된다)

위와 같이 명칭과 색상이 나온다.
명칭을 그대로 (예를 들어 next.js는 logo=next.js) 적고,
색상은 클릭하면 복사된다.

---

테이블 작성 요령

중요한점 몇가지만 짚도록 해보자.

|<img src="https://github.com/~~~.png" width="80">|<img src="https://github.com/~~~.png" width="80">|
|:---:|:---:|
|[](https://github.com/ImInnocent)|[](https://github.com/dearyeon)|
|블록체인|프론트엔드|

실제 화면

중요한 점은 둘째줄이다.
header와 body를 나누는 구분선인데,
저게 없으면 테이블이 만들어지지 않는다.

모양에 따라서 정렬이 달라진다.

|:---| : 왼쪽 정렬
|---:| : 오른쪽 정렬
|:---:| : 중앙 정렬