[꿀팁] Github Readme 예쁘게 꾸미기 [Readme Header, Badge, Widget 등]

2022. 6. 8. 08:36·◐ 기타/알아두면 좋은 팁(tip)✨
728x90

- Github Readme 꾸미기

Yermi's Github Readme!

kycasdzxc - Overview

#Yermi #코딩공부 #주니어개발자. kycasdzxc has 25 repositories available. Follow their code on GitHub.

github.com


1. Readme 용 ✨special✨ repository 생성하기

레파지토리 생성 시, 본인 계정의 이름으로 생성하면 ✨special✨ repository를 만들 수 있다.

하단에 'Add a README file'도 체크한다.

Readme 꾸밀 준비, 완료!

- Readme test 사이트

Shields.io: Quality metadata badges for open source projects

Love Shields? Please consider donating to sustain our activitiesYour BadgeStaticUsing dash "-" separator/badge/ - - Dashes --→- DashUnderscores __→_ Underscore_ or Space  →  SpaceUsing query string parameters/static/v1?label= &message= &color= Colo

shields.io


1. Readme Header

Yermi's Readme Header

 

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

:rainbow: Dynamic Coloful Image Render. Contribute to kyechan99/capsule-render development by creating an account on GitHub.

github.com

 

Header에 대한 다양한 커스텀이 존재한다.

 

<img src="https://capsule-render.vercel.app/api?type=waving&color=auto&height=200&section=header&text=내용입력&fontSize=90" />

 


2. Readme Badge

Yermi's Readme Badge

 

<img src="https://img.shields.io/badge/아이콘내용-바탕색?style=flat&logo=로고이름&logoColor=white"/>

 

- logo 및 색상 참고 사이트

Simple Icons

2261 Free SVG icons for popular brands.

simpleicons.org

 

로고이름과 배경색 확인!

 

<div align="center">
	<img src="https://img.shields.io/badge/Java-007396?style=flat&logo=Java&logoColor=white" />
	<img src="https://img.shields.io/badge/HTML5-E34F26?style=flat&logo=HTML5&logoColor=white" />
	<img src="https://img.shields.io/badge/CSS3-1572B6?style=flat&logo=CSS3&logoColor=white" />
</div>

 


3. Readme Widget

Yermi's Readme Widget

 

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

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

github.com

 

<img src="https://github-readme-stats.vercel.app/api/top-langs/?username=본인아이디&layout=compact"><br><br>
<img src="https://github-readme-stats.vercel.app/api?username=본인아이디&show_icons=true">

 




- 그 외 (백준 티어, 방문자 수 등)

- 백준 티어 프로필

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

Github 프로필에서 boj 프로필을 이쁘게 보여주는 프로젝트. Contribute to mazassumnida/mazassumnida development by creating an account on GitHub.

github.com

 

백준 티어 프로필 예시

- 방문자 수

HITS

Easy way to know how many visitors are viewing your Github, Website, Notion.

hits.seeyoufarm.com

 

Github 방문자 수 조회

- 3D 잔디

[Github] 깃헙 리드미 잔디를 3D로 보여주는 방법

며칠전에 갑자기 팀장님이 회사메신저로 아래의 이미지를 보내주셨다. 보자마자 솔깃 하쟈나 하면서 깃헙 3D 잔디를 찾아봤다. 찾아보니 GitHub - yoshi389111/github-profile-3d-contrib: This GitHub Action creates

h-owo-ld.tistory.com

깃허브 3D 잔디 / 출처 : https://h-owo-ld.tistory.com/264

 


- Yermi's Readme 코드가 보고 싶다면?

GitHub - kycasdzxc/kycasdzxc: My name is Yermi! 👦🏻✨

My name is Yermi! 👦🏻✨. Contribute to kycasdzxc/kycasdzxc development by creating an account on GitHub.

github.com


README.md 클릭
Display the source 버튼 클릭
🎖 Yermi's Readme 코드 확인! 🎖

🌟🌟🌟 여러분의 별 하나는 제게 큰 힘이 됩니다! 🌟🌟🌟

728x90
'◐ 기타/알아두면 좋은 팁(tip)✨' 카테고리의 다른 글
  • [꿀팁] ',' expected 에러 해결하기 [html, js 등의 파일에서 발생하는 에러 해결하기]
  • [꿀팁] CSS selector 연습 사이트 [CSS 선택자 게임, CSS Diner]
  • [꿀팁] 저작권 관련 프로젝트 배포 시 유의사항 [noindex로 검색 색인 생성 차단하기]
  • [꿀팁] NSSM을 이용하여 Windows에 서비스 추가하기 [NSSM으로 NginX 서비스로 등록하기]
예르미(yermi)
예르미(yermi)
끊임없이 제 자신을 계발하는 개발자입니다👨🏻‍💻
  • 예르미(yermi)
    예르미의 코딩노트
    예르미(yermi)
  • 전체
    오늘
    어제
    • 분류 전체보기 (937)
      • ◎ Java (133)
        • Java☕ (93)
        • JSP📋 (26)
        • Applet🧳 (6)
        • Interview👨🏻‍🏫 (8)
      • ◎ JavaScript (48)
        • JavaScript🦎 (25)
        • jQuery🌊 (8)
        • React🌐 (2)
        • Vue.js🔰 (6)
        • Node.js🫒 (3)
        • Google App Script🐑 (4)
      • ◎ HTML5+CSS3 (17)
        • HTML5📝 (8)
        • CSS3🎨 (9)
      • ──────────── (0)
      • ▣ Framework (67)
        • Spring🍃 (36)
        • Spring Boot🍀 (12)
        • Bootstrap💜 (3)
        • Selenium🌕 (6)
        • MyBatis🐣 (10)
      • ▣ Tools (47)
        • API🎯 (18)
        • Library🎲 (15)
        • JitPack🚀 (3)
        • Jenkins👨🏻 (7)
        • Thymeleaf🌿 (4)
      • ▣ Server (32)
        • Apache Tomcat🐱 (14)
        • Apache HTTP Server🛡️ (1)
        • Nginx🧶 (7)
        • OracleXE💿 (4)
        • VisualSVN📡 (4)
      • ▣ OS : 운영체제 (18)
        • cmd : 명령프롬프트💻 (10)
        • Linux🐧 (8)
      • ▣ SQL : Database (56)
        • Oracle SQL🏮 (26)
        • PL SQL💾 (9)
        • MySQL🐬 (6)
        • MariaDB🦦 (6)
        • H2 Database🔠 (3)
        • SQL 실전문제🐌 (6)
      • ────────── (0)
      • ◈ Human Project (86)
        • Mini : Library Service📚 (15)
        • 화면 설계 [HTML]🐯 (10)
        • 서버 프로그램 구현🦁 (15)
        • Team : 여수어때🛫 (19)
        • Custom : Student🏫 (9)
        • Custom : Board📖 (18)
      • ◈ Yermi Project (40)
        • 조사모아(Josa-moa)📬 (5)
        • Riddle-Game🧩 (6)
        • 맛있을 지도🍚 (2)
        • 어디 가! 박대리!🙋🏻‍♂️ (5)
        • 조크베어🐻‍❄️ (4)
        • Looks Like Thirty🦉 (2)
        • Toy Project💎 (12)
        • 오픈소스 파헤치기🪐 (4)
      • ◈ Refactoring (15)
        • Mini : Library Service📚 (8)
        • 서버 프로그램 구현🦁 (1)
        • Team : 여수어때🛫 (0)
        • 쿼리 튜닝일지🔧 (6)
      • ◈ Coding Test (89)
        • 백준(BOJ)👨🏻‍💻 (70)
        • 프로그래머스😎 (2)
        • 코드트리🌳 (7)
        • 알고리즘(Algorithm)🎡 (10)
      • ◈ Study (102)
        • 기초튼튼 개발지식🥔 (25)
        • HTTP 웹 지식💡 (4)
        • 클린코드(Clean Code)🩺 (1)
        • 디자인패턴(GoF)🥞 (12)
        • 다이어그램(Diagram)📈 (4)
        • 파이썬(Python)🐍 (16)
        • 에러노트(Error Note)🧱 (34)
        • 웹 보안(Web Security)🔐 (6)
      • ◈ 공부모임 (39)
        • 혼공학습단⏰ (18)
        • 코드트리 챌린지👊🏻 (2)
        • 개발도서 100독👟 (8)
        • 나는 리뷰어다🌾 (11)
      • ◈ 자격증 공부 (37)
        • 정보처리기사🔱 (16)
        • 정보처리산업기사🔅 (9)
        • 컴퓨터활용능력 1급📼 (12)
      • ─────────── (0)
      • ◐ 기타 (113)
        • 알아두면 좋은 팁(tip)✨ (46)
        • 개발자의 일상🎈 (44)
        • 개발도서 서평🔍 (10)
        • 개발관련 세미나🎤 (2)
        • 블로그 꾸미기🎀 (9)
        • 사도신경 프로젝트🎚️ (2)
  • 인기 글

  • 최근 댓글

  • 태그

    꿀팁
    Database
    jsp
    코딩 테스트
    Project
    Java
    Oracle
    백준 티어
    프로그래밍
    BOJ
    javascript
    CSS
    자바스크립트
    SQL
    코딩
    Error Note
    백준
    일상
    html
    spring
  • 250x250
  • hELLO· Designed By정상우.v4.10.3
예르미(yermi)
[꿀팁] Github Readme 예쁘게 꾸미기 [Readme Header, Badge, Widget 등]
상단으로

티스토리툴바