[Github] 깃헙 프로필 화려하게 꾸미기🥸✨

applejin·2022년 9월 22일
2

Github

목록 보기
1/2
post-thumbnail

전부터 심심한 내 깃헙 메인 화면이 마음에 걸렸다,,
드디어 Github 프로필을 꾸민 기념으로 방법을 글로 남기고자 한다!

1. Repository 생성

먼저, Github에서 새 Repository를 만들어야 한다.

  1. 본인 계정 깃헙을 들어가 '+' 버튼을 눌러 New repository를 선택한다.
  1. 본인 깃헙 아이디와 동일하게 Reapository name을 입력한다.

    (나는 이미 만들어져 있는 상태이기 때문에 경고가 뜬다.)

  2. PublicAdd a README file 체크 ✔️✔️ 후 Create 하면 끝!!

메인에 README가 뜨면 성공이다!!👍🏼👍🏼


README는 마크다운 또는 태그 형식으로 작성할 수 있다.
오른쪽 위에 연필 아이콘을 클릭하면 수정할 수 있다.

나는 CSS를 더 넣고 싶어서 태그 형식으로 작성했다!!

2. Header

capsule-render API를 사용했다.

👆🏻해당 깃헙에 들어가 README.md를 보고 따라하면 된다!!

아주 아주 친절하게 How to Use가 있다^0^
Markdown과 HTML 둘 중 원하는 코드로 갖다 쓰면 된다.

![header](https://capsule-render.vercel.app/api?type=wave&color=gradient&height=200&section=header&text=Hyejin%20Kwon&fontSize=70&fontColor=333333&animation=fadeIn)

내가 작성한 코드는 👆위와 같다.

  • Types

    type은 아래 목록 중에서 원하는 타입을 넣으면 된다.

나는 wave를 선택했다.

type=wave
  • Color

    color도 아래 목록 중에서 원하는 타입을 넣으면 된다.

나는 gradient를 선택했다.

&color=gradient
  • Text

    text는 아래와 같이 &text= 으로 작성한다.
    뛰어쓰기는 넣고 싶은 자리에 %20를 쓰면 된다.

나는 내 이름 Hyejin Kwon을 입력했다.

&text=Hyejin%20Kwon

헤더 완성본!!✨✨


3. 배지

배지 : shields.io
아이콘 : simpleicons.org

배지를 추가하기 위해선 위 두 링크가 필요하다.
사실 배지 링크로 들어가도 따라하기 어렵다ㅠㅗㅠ

내가 사용한 코드는

<img src="https://img.shields.io/badge/-HTML5-E34F26?style=flat&logo=html5&logoColor=ffffff"/>

설명을 하자면,
태그는 img를 썼고 src 안에 링크를 넣어 사용한다.
https://img.shields.io/badge/ 뒤에
원하는 텍스트를 -텍스트- 형식으로 넣는다.
다음 E34F26?는 배지의 배경 색이다.
배지의 색은 simple icons 에서 검색하면 찾을 수 있다.

세 번째, style은 flat으로 설정했다.
네 번째, logo= 에 넣고자 하는 로고 이름을 넣는다. (소문자만 가능한듯 하다.)
다섯 번째, logoColor= 에 넣고 싶은 로고 색을 넣는다.
(배경이 짙은 경우가 많아서 FFFFFF를 추천한다!)
로고 색은 logoColor를 입력하지 않으면 기본 로고 컬러로 설정된다.

참고로, Vue.js는 방법이 어려웠다ㅠㅠ
⭐️ Vue.js의 로고 이름은 vuedotjs이다!!
다른 로고 이름들 보면서 때려 맞춰봤는데 한번에 맞았다✌🏽✌🏽

그렇게 완성된 내 깃헙 프로필!!
아쥬 뿌듯했다,,💗💗

많이 놀러와주세요ㅎ.ㅎ
Hyejin Kwon Github


👉🏽 참고

profile
front-end developer

0개의 댓글