Readme 만들기
깃허브 프로필을 꾸미는 Readme는 하나의 repository 입니다
new를 눌러 repository를 생성해주세요
repository name은 본인의 아이디로 해주세요!
저는 이미 hyeg0121 이라는 Readme repository를 만들었기 때문에 경고가 나옵니다
그 후에 Add a READMEFILE 에 체크하고 레포지토리를 생성합니다
레포지토리에 들어가보면 생성이 된것을 확인 할 수 있어요
연필모양을 클릭하여 수정에 들어가면
이런 코드가 보여요! 이 코드를 수정하면서 Readme를 꾸며나가는 겁니다
이 코드를 꾸밀 때 markdown 언어 혹은 HTML을 사용할 수 있는데
저는 둘 다 사용하여 Readme를 꾸며보겠습니다
Header & Footer
<img src="https://capsule-render.vercel.app/api?type=모양&color=색상코드&height=높이§ion=header&text=텍스트&fontSize=텍스트크기" />
위 코드를 Readme에 복사 붙여넣기 하면 header를 만들 수 있습니다
<img src="https://capsule-render.vercel.app/api?type=모양&color=색상코드&height=높이§ion=footer&text=텍스트&fontSize=텍스트크기" />
footer도 마찬가지 입니다.
당연하지만 한글로 써져있는 부분을 알맞게 바꿔주세요!
헤더와 푸터의 타입 종류들입니다.
참고사항
텍스트를 입력 할 때 띄어쓰기는 %20 으로 나타냅니다
컬러 코드를 기입할 때에는 #을 빼고 숫자나 영어만 씁니다
텍스트 배경이나 폰트 컬러도 지정할 수 있습니다
자세한 사항은 첨부한 링크를 참고해주세요
<img src="https://capsule-render.vercel.app/api?type=waving&color=BDBDC8&height=150§ion=header" />
<img src="https://capsule-render.vercel.app/api?type=waving&color=BDBDC8&height=150§ion=footer" />
Readme Widgets
Readme에 다양한 위젯을 추가 할 수 있습니다
저는 사용한 언어 비율을 나타내는 위젯을 추가해볼게요
[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=깃허브 아이디)](https://github.com/anuraghazra/github-readme-stats)
본인의 깃허브 아이디만 입력하면 끝이나요 아주 간단합니다
본인의 깃허브에 대한 평판을 나타내는 위젯입니다
[![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=깃허브아이디)](https://github.com/anuraghazra/github-readme-stats)
![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=깃허브아이디&hide=contribs,prs&show_icons=true&theme=테마)
저는 아이콘을 보여주고, 테마를 graywhite로 바꿨습니다
위에 첨부한 링크에 다양한 옵션과 테마가 있으니 참고해주세요
velog 글 가져오기
velog의 특정 글을 보여주는 위젯입니다
들어가면 한국어로 설명이 되어있어서 앞서 소개한 것들보다 읽기 편하실거에요
그러니 자세한 설명은 하지 않겠습니다
[![Velog's GitHub stats](https://velog-readme-stats.vercel.app/api?name=벨로그아이디)](벨로그링크)
저는 제일 최신 글을 보여주는 위젯을 설정했어요
badge 만들기 (shields.io)
로고 아이콘과 공식 색상을 알 수 있는 사이트 입니다
<a href="링크"><img src="https://img.shields.io/badge/텍스트-색상코드?style=flat-square&logo=로고이름&logoColor=로고색"/></a>
는 링크에 연결할 때 사용하는 태그입니다. 연결할 링크가 없을 경우에는 삭제해서 사용하세요.
컬러 코드를 기입할 때에는 #을 빼고 숫자나 영어만 씁니다!
<a href="https://www.instagram.com/"><img src="https://img.shields.io/badge/Instagram-E4405F?style=flat-square&logo=Instagram&logoColor=white"/></a>
badge 만들기 (awesome-badges)
https://github.com/Envoy-VC/awesome-badges
위 레포지토리에 접속하시면 많은 뱃지가 있습니다.
![js](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=JavaScript&logoColor=white)
사용할 뱃지의 url을 소괄호 안에 적으시고, 대괄호 안에는 아무 문자나 넣어주세요
Github Readme Streak states
위 링크에 들어가면 이런 창이 나옵니다 .
username에 깃허브 아이디를 써 주시고, 여러가지 옵션을 선택한 후 Markdown을 리드미에 붙여넣기 하시면 됩니다.
타이핑 애니메이션 넣기
위 사이트에서 타이핑 애니메이션이 적용 된 글자를
리드미에 추가할 수 있습니다. 마찬가지로 마크다운 또는 HTML 코드를 복사 붙여넣기 하면 됩니다.
[![Typing SVG](https://readme-typing-svg.demolab.com/?lines=첫번째+줄+의+텍스트;두번째+줄+의+텍스트)](https://git.io/typing-svg)
코드로도 간단히 작성 할 수 있습니다.
토글 넣기
html의 detail과 summary를 이용하여 토글을 만들 수 있습니다.
<details>
<summary>
토글 제목
</summary>
토글 안 내용
</details>
사용 예시
<details>
<summary>
<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Hand%20gestures/Eyes.png" alt="Eyes" width="2%" /> 내가 지금 배우는 ...
</summary>
<br>
![js](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=JavaScript&logoColor=white) ![html](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white) ![css](https://img.shields.io/badge/CSS-239120?&style=for-the-badge&logo=css3&logoColor=white) ![react](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)
![MySQL](https://img.shields.io/badge/mysql-%2300f.svg?style=for-the-badge&logo=mysql&logoColor=white) ![java](https://img.shields.io/badge/Java-ED8B00?style=for-the-badge&logo=openjdk&logoColor=white) ![c](https://img.shields.io/badge/C-00599C?style=for-the-badge&logo=c&logoColor=white) ![python](https://img.shields.io/badge/Python-14354C?style=for-the-badge&logo=python&logoColor=white) ![kotlin](https://img.shields.io/badge/Kotlin-0095D5?&style=for-the-badge&logo=kotlin&logoColor=white) ![spring](https://img.shields.io/badge/Spring-6DB33F?style=for-the-badge&logo=spring&logoColor=white)
</details>