[Github] 깃꾸를 해보자
이번 포스팅은 깃꾸를 해보려한다. sql 시험이 끝나서 개강 전까지는 이렇게 라이트한 포스팅만 간간이 올릴 예정이다~~ 예~
깃허브 완성본
우선 내 깃허브 완성본을 보여주고 내가 뭐뭐 썼는지 말해주겠다. 내 깃허브도 하단에 링크 달아두게따. 내 깃허브 리드미에서 코드 봐도 무방하다~
일단 깃팜이 정말 귀여운듯하다. 근데 쟤네는 먼기준으로 생기는거지? 그리고 햄스터랑 펭귄 왜케많지 근데 확실히 깃꾸한게 더 간지난다. 그럼 이제 깃꾸 시작하는법, 내가 쓴 거를 하나씩 말해주겠다.
깃꾸 시작하는 법
우선 새로운 레파지토리를 만든다 이때 내 아이디이름과 같은 레파지토리를 만들고, 퍼블릭 + 리드미 추가 하면 된다.
꼭 위와 같이 ✨스페셜✨ 요런거 떠야된다 그래야 깃꾸된다
그리고 이제 깃꾸하면 된다. 아래처럼 코드 쓰는곳 프리뷰가 있는데 프리뷰로 보면서 적용 잘 되는지 확인하면서 깃꾸하면 편하다!
1. 내 소개
우선, 내 깃허브 리드미 코드를 보면 알겠지만 나는 크게 div 세개로 나누어서 꾸며놨다. 첫번째 두번째 div에는 바로 위의 사진과 같이 내 깃허브를 소개하는 오프닝 멘트를 담고있다.
인삿말, sns, 소개글 세개의 파트를 나눠서 설명해주겠다!
인삿말
나는 인삿말은 <h2>태그를 통해 좀 크게 달아놨다. 참고로, div엔 다 align="center"를 달아 중앙정렬 해놓았다.
<div align="center">
<h2>안녕하세요! 정민의 GITHUB에 오신걸 환영합니다 ദ്ദി(˵ •̀ ᴗ - ˵ ) ✧ </h2>
</div>
이렇게 원하는 멘트를 넣고 preview로 보면, 이렇게 소개멘트가 생긴걸 볼 수 있다 !!
sns 버튼
두번째로 탐났던 깃꾸 기능인데, 이렇게 <a> 태그 안에 href 옆에 sns의 url을 넣어주면 된다. 위는 티스토리, 아래는 인스타그램이다!
<a href="내티스토리url" target="_blank">
<img src="https://img.shields.io/badge/tistory-000000?style=for-the-badge&logo=tistory&logoColor=white">
</a>
<a href="내인스타url" target="_blank">
<img src="https://img.shields.io/badge/instagram-E4405F?style=for-the-badge&logo=instagram&logoColor=white">
</a>
참고는 이 분의 티스토리에서 했다.. 그래서 다른 sns버튼은 어딨는지 모른다 ㅜㅜ
https://queenddubi.tistory.com/66
Github 꾸미기😎 깃꾸✨ READEME를 채워보자!
비록 깃허브에 프로젝트는 남루하지만... 요리조리 꾸며서 예쁘게 만들고 싶어졌다! 나를 잔뜩 표현할 수 있는 깃허브를 만들어보겠다🥰 먼저 내 계정 아이디와 똑같은 이름의 새 레포지토리를
queenddubi.tistory.com
이 코드도 위의 div 안에 넣어주니 점점 깃꾸가 되어가는게 보인다!!
소개글
마지막으로 네모안에 내 소개를 넣은 것을 해보겠다! 실은 이건 어떻게 하는지 잘 모르겠다.. 자꾸 네모안에 안들어가고 와일드하게 줄글로 써져서 그냥 친구 깃허브에서 복붙 해와서 글자만 변형한거라... 그래서 실은 위의 div에 같이 넣으려했는데 그러면 자꾸 네모안에 안들어가져서 div를 새로 분리한것이다. 코드는 아래처럼 div 안에 한줄 띄우고 멘트를 쓰면 된다.
<div align="center">
💡 저는 한국항공대학교 소프트웨어학과 3학년에 재학중입니다!
서버/백엔드에 관심이 많으며 최근엔 인프라 공부를 하려하고있습니다 ٩(*'へ'*)و
열심히 깃허브를 더 채워보겠습니다!
</div>
이렇게하면!! 이제 내 깃꾸의 상단부분이 완성된다! 쨔란~
여기까지의 코드는 아래와 같다.
<div align="center">
<h2>안녕하세요! 정민의 GITHUB에 오신걸 환영합니다 ദ്ദി(˵ •̀ ᴗ - ˵ ) ✧ </h2>
<a href="본인티스토리링크넣기" target="_blank">
<img src="https://img.shields.io/badge/tistory-000000?style=for-the-badge&logo=tistory&logoColor=white">
</a>
<a href="본인인스타프로필링크 넣기" target="_blank">
<img src="https://img.shields.io/badge/instagram-E4405F?style=for-the-badge&logo=instagram&logoColor=white">
</a>
</div>
<div align="center">
💡 저는 한국항공대학교 소프트웨어학과 3학년에 재학중입니다!
서버/백엔드에 관심이 많으며 최근엔 인프라 공부를 하려하고있습니다 ٩(*'へ'*)و
열심히 깃허브를 더 채워보겠습니다!
</div>2. 본문 채우기
자 이제 본격적으로 스택, 백준, 깃팜 등을 넣어보자~ 바로바로 이부분이다!
Tech Stack, Problem Solving!, Github Stats!, My Git Farm! 이렇게 네 종류가 있는 것을 알 수 있다. 각각 설명해주겠다!
Tech Stack
우선, Tech Stack이라는 제목을 달아야될 것이다. 난 <h3>사이즈를 선택했다. 상단에는 이렇게 제목을 달고 하단엔 뱃지들을 달았다.
바로 코드를 봐보겠다.
<h3>Tech Stack!</h3>
[]안을 보면 내가 어떤 뱃지를 썼는지 알 수 있을거다. 그냥 본인이 넣고싶은 스택 내 코드에서 복붙해가면 된다.
만약 이 코드에 본인이 넣고싶은 스택이 없을때 꿀팁을 주자면, 지피티한테 '이렇게 기술 스택 뱃지를 넣고싶은데, 난 VSCode도 넣고싶어! ' 이런식으로 말하면 코드를 줄거다 그럼 그거 코드에 추가하면 뱃지 잘 추가될 것이다. ㅎㅎ
나는 언어, 프레임워크, 툴 이런식으로 공통된것들끼리 한줄에 배치했다. 저렇게 사이사이 줄을 띄우면 줄바꿈 되니까 참고하기!
이 코드를 적으면 요로코롬~ 될 것이다! 물론 얘네는 <div align="center">태그 안에 넣어져있을것이다~ 그래야 중앙정렬 된다
Problem Solving
이번엔 백준을 넣어보자! 백준 잘 못풀고 꾸준히도 잘 못해서 내 스트릭이랑 티어는 좀 부끄럽지만 그럼에도 넣어봤다 ㅎㅎ... 그냥 있어보이는...... 안있어보이나 일단 코드는 아래와 같다.
<h3>Problem Solving!</h3>
<img src="http://mazassumnida.wtf/api/v2/generate_badge?boj=백준아이디" alt="Solved.ac Profile"/>
<a href="https://solved.ac/profile/백준아이디" target="_blank">
<img src="http://mazandi.herokuapp.com/api?handle=백준아이디&theme=테마" alt="Solved.ac streak"/>
</a>
보면 코드안에 백준아이디 넣으라고 돼있는 곳이 있을 것이다. 거따가 본인의 백준 아이디를 넣어주면 된다. 그리고 두번째 이미지 태그에는 테마도 넣을 수 있게 되어있는데, 테마는 warm, cold, dark 이렇게 세개가 있다. 세개 적용해보고 맘에드는 것을 해라! 난 기본값인 warm이 무난해서 warm을 넣어놨다.
그러면 아래처럼 요로코롬~
Github Stats
깃허브 스탯도 나타내보자. B+..? 그래도 C- 이런거 아니니까 넣어둘만한거같아서 넣어놨다. 얘도 역시 바로 코드 알려주겠다. 얜 좀 간단하다.
<h3><b>Github Stats!</b></h3>
<img src="https://github-readme-stats.vercel.app/api?username=깃허브아이디&theme=테마&show_icons=true&count_private=true&hide_border=true" align="center" />
여긴 깃허브 아이디, 테마만 넣어주면 된다. 테마는 아래 사이트에서 골라보기!! 참고로 나는 swift 테마이다.
https://github.com/anuraghazra/github-readme-stats/blob/master/themes/README.md
github-readme-stats/themes/README.md at master · anuraghazra/github-readme-stats
:zap: Dynamically generated stats for your github readmes - anuraghazra/github-readme-stats
github.com
이러면 요로코롬 ~
Git Farm
마지막으로 깃팜!! 얘가 제일 귀엽다;; 근데 깃팜 동물 생기는 기준이랑 종류 기준 모르겠다.
우선 얘는 내 깃팜 링크를 가지고와야된다.
https://www.gitanimals.org/en_US
GitAnimals
깃허브 활동으로 펫을 키우세요!
www.gitanimals.org
여기 들어가서, 내 깃허브로 로그인하고나서 single Type이 아니라 Farm Type을 누르고 아래 카피 링크 해서 내 팜 링크를 가져온다.
그리고 본인의 팜 링크를 넣으면 된다!!
<h3>My Git Farm!</h3>
여기에 붙여넣기
애초에 저 링크가 아예 태그까지 감싸준 링크를 주기때문에 진짜 그냥 복.붙. 끝이다. 조정할게 하나 있다면, 사이즈이다. 코드를 보면 width랑 height를 지정해놨는데, 난 깃팜 너무너무 큰거같아서 width는 그냥 지워버리고 height를 250으로 줄여줬다. 이러면 width도 알아서 비율 맞게 잘 줄어든다.
쨔란 ~
2. 본문채우기의 전체 코드는 아래와 같다. 이 코드는 내 아이디랑 내 깃팜이니까 이걸 복붙하진 말기 ㅜㅜ!
잘 보면 div 안에 <h3>으로 제목달고 내용, 제목달고 내용 이게 잘 구성되어있는걸 볼수있따~
<div align="center">
<h3>Tech Stack!</h3>
<h3>Problem Solving!</h3>
<img src="http://mazassumnida.wtf/api/v2/generate_badge?boj=wjdalssla12" alt="Solved.ac Profile"/>
<a href="https://solved.ac/profile/wjdalssla12" target="_blank">
<img src="http://mazandi.herokuapp.com/api?handle=wjdalssla12&theme=warm" alt="Solved.ac streak"/>
</a>
<h3><b>Github Stats!</b></h3>
<img src="https://github-readme-stats.vercel.app/api?username=2ivii&theme=swift&show_icons=true&count_private=true&hide_border=true" align="center" />
<h3>My Git Farm!</h3>
<a href="https://www.gitanimals.org/en_US?utm_medium=image&utm_source=2ivii&utm_content=farm">
<img
src="https://render.gitanimals.org/farms/2ivii"
height="250em"
/>
</a>
</div>여기까지가 내 깃꾸이다. 참고로, 깃꾸는 진짜 이쁘게 잘한사람 더 많으니 더 추가하고싶으면 더 찾아보도록 하자!!
아래는 내 깃허브이다. 전체코드가 궁금하다면 내 깃허브 리드미 봐보기~
2ivii - Overview
2ivii has 8 repositories available. Follow their code on GitHub.
github.com