[Github] 깃허브 메인 프로필 소개글 README로 깔쌈하게 작성하는 법

최근 깃허브에 방문하면 메인 소개글을 README로 쌈박하게 해놓으신 분들을 많이 보았다. 처음 들어오면 소개글에 눈이 먼저 가게 되어 그 사람에 대해 읽는 것 부터 시작하게 되어 말그대로 자신에 대해 간략하게 알리기 좋다. 커스터마이즈로 꾸밀 수 있으니 자기가 원하는 내용으로 구성하고 마크업으로 디자인 할 수 있다. 

 

1. 새로운 Repository 생성

 

- 깃허브의 오너 이름과 같도록 생성한다.

- Public으로 설정한다.

- Add a README(최초생성시 해야함. Initialize it with a README to get started)

 

귀여운 캐릭터가 "비밀을 찾았군여! iluvdadong/iluvdadong은 스페셜한 레파지터리에요! 프로필을 만들어보세요~ 하고 설명해준다.

 

 

 

2.꾸며보자!

 

생성하자마자 프로필을 만들어준다. 이제 마음껏 꾸며주기만 하면 된다!

 

수정을 누르면 아래처럼 예시도 친절하게 주석처리해서 만들어 준다.

### Hi there 👋

<!--
**iluvdadong/iluvdadong** is a ✨ _special_ ✨ repository because its `README.md` (this file) appears on your GitHub profile.

Here are some ideas to get you started:

- 🔭 I’m currently working on ...
- 🌱 I’m currently learning ...
- 👯 I’m looking to collaborate on ...
- 🤔 I’m looking for help with ...
- 💬 Ask me about ...
- 📫 How to reach me: ...
- 😄 Pronouns: ...
- ⚡ Fun fact: ...
-->

 

shields.io 문서에서 사용법을 읽어보고 뱃지를 달아보자.

Shields.io: Quality metadata badges for open source projects

 

simpleicons에서는 기술의 로고명과 색상코드를 확인할 수 있다. 뱃지달 때 참고하기 좋다.

Simple Icons

 

 

쉴드 문법을 위처럼 사용하고 simple icon에서 logo, logoColor를 찾아서 &로 이미지 URL 끝에 그대로 입력해주면 된다. 하나하나 색상 코드 찾고 입력하려면 생각보다 시간이 조금 걸린다.

simpleicon

 

아래는 제가 작성한 코드입니다. 마크업 하실 때 참고해보세요!

## 💻 STACK

![](https://img.shields.io/badge/Javascript-F7DF1E?style=flat-square&logo=JavaScript&logoColor=black)
![](https://img.shields.io/badge/Swift-FA7343?style=flat-square&logo=Swift&logoColor=white)
<br>
![](https://img.shields.io/badge/HTML5-E34F26?style=flat-square&logo=HTML5&logoColor=white)
![](https://img.shields.io/badge/CSS3-1572B6?style=flat-square&logo=CSS3&logoColor=white)
![](https://img.shields.io/badge/PostCSS-DD3A0A?style=flat-square&logo=PostCSS&logoColor=white)
<br>
![](https://img.shields.io/badge/React-61DAFB?style=flat-square&logo=React&logoColor=black)
![](https://img.shields.io/badge/Redux-764ABC?style=flat-square&logo=Redux&logoColor=white)
![](https://img.shields.io/badge/ReduxSaga-999999?style=flat-square&logo=Redux-Saga&logoColor=white)
![](https://img.shields.io/badge/GraphQL-E10098?style=flat-square&logo=GraphQL&logoColor=white)
<br>
![](https://img.shields.io/badge/Netlify-00C7B7?style=flat-square&logo=Netlify&logoColor=white)
![](https://img.shields.io/badge/MSAzure-0078D4?style=flat-square&logo=MicrosoftAzure&logoColor=white)

 

완성!

iluvdadong - Overview

 

* G메일의 경우 아래 라메개발자님 깃허브를 참고했습니다. :) 

pkiop - Overview