Github 꾸미기

1. 자신의 깃허브 계정과 같은 이름의 repository 생성

👉 Public, Readme 선택

2. Readme 수정하기

https://stackedit.io/app#
👉 stackedit에선 수정 과정이 실시간으로 반영돼서 보여요! 그래서 저는 번거롭게 깃허브에서 변경사항 저장하고 확인하지 않고 여기에서 다 꾸민 후 깃허브에 붙여넣기 했습니다.

2-1. Header

📌 Link: https://github.com/kyechan99/capsule-render#how-to-use

아래 코드를 복사하여 사용자의 깃허브 Readme에 붙여넣기 해주세요

![header](https://capsule-render.vercel.app/api?type=wave&color=auto&height=300&section=header&text=capsule%20render&fontSize=90)

아래는 코드에 대한 설명입니다.

1. Type
   Type data makes to change Background Image (위 코드에서 type= 뒤에 작성)
   배너의 모양이 달라집니다 자세한 정보는 위의 깃허브 링크 통해 확인 가능합니다!

   wave, egg, shark, slice, rect, soft, rounded, cylinder, waving, transpare

2. Color
   Change Background color

• &color=A3DCBE
  

👉 컬러를 정해두지 않고 random하게 자동으로 설정되도록 할 수 있습니다.

3. Section
   • section=header (default)
     
   • section=footer
     
4. Reversal
   Reverse the image left and right (Color at the same time)
   이미지를 좌우로 대칭시킵니다 (컬러도 변경됩니다)

![reversal](https://capsule-render.vercel.app/api?type=slice&reversal=true&color=gradient)

• &reversal=false :(default)
  
• &reversal=true
  

5. Height
   Change image size. Default value is 120 (Do not write px)
   배너의 사이즈를 지정합니다.

![header](https://capsule-render.vercel.app/api?height=400)

6. Text
   Input text over the Image
   적고 싶은 메시지를 &text= 뒤에 작성합니다.

![header](https://capsule-render.vercel.app/api?text=Hello%World!)

#, &, / 와 같은 특수문자는 사용할 수 없습니다.

7. Desc
   Input description over the Image
   Text 아래 설명을 작성합니다.

![header](https://capsule-render.vercel.app/api?height=400&text=Hello%20World!&desc=Hello%20capsule%20render)

8. Text Background
   Background of Text
   텍스트의 배경을 생성합니다.
   Write &textBg=true to active

![header](https://capsule-render.vercel.app/api?type=rounded&color=gradient&text=%20asdf%20&height=300&fontSize=100&textBg=true)

배경 크기는 텍스트 길이에 따라 달라지기 때문에 %20 사이에 텍스트를 추가하면 됩니다. (%20은 간격을 의미합니다.

9. Text Animation
   Make the text dynamic
   텍스트에 역동성 부여
   Write &animation=

![header](https://capsule-render.vercel.app/api?text=capsule_render&animation=twinkling)

• fadeIn: fadeIn 1.2s (밝아짐)
• scaleIn: scaleIn .8s (날아옴)
• blink: 반짝임
• blinking: 계속 반짝임
  
• twinkling: 깜빡임

10. FontColor
    Change text color
    Write &fontColor= behind Text query
    텍스트 쿼리문 뒤에 작성해주어야 반영됩니다.

![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontColor=d6ace6)

11. FontSize
    Change text font size. Default value = 70
    Write &fontSize= behind Text query

12. FontAlign
    Change text horizontal-align (x좌표). write number between 0~100
    &fontAlign= : Default value is 50. center of image

![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontAlign=20)

13. FontAlignY
    Change text vertical-align (y). write number between 0~100
    &fontAlignY= : Default value is 50. center of image

![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontAlignY=20)

14. DescSize
    Change desc font size. Default value is 20.
    Write &descSize= behind desc query
    설명 텍스트의 사이즈를 조절합니다. px은 사용하지 마세요
    텍스트와 마찬가지로 설명문 쿼리 뒤에 작성합니다.

![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontSize=40&desc=Desc&descSize=30)

15. DescAlign
    Change desc horizontal-align (x). write number between 0~100
    &descAlign= : Default value is 50. center of image

![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontAlign=70&desc=Desc&descAlign=20)

16. DescAlignY
    Change text vertical-align (y). write number between 0~100
    &descAlignY= : Default value is 60. center of image

![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontSize=20&rotate=-30)

17. Rotate
    Usage &rotate= , to rotate text.
    You can also use negative number.
    

    0~360, 0~-360 을 권장합니다.

18. Stroke
    Change text stroke.
    Write &stroke= behind query
    Value should be Hex code with erased '#'
    텍스트 외곽선
    

19. Stroke-width
    Change text stroke width.
    Write &strokeWidth= behind stroke query
    Value must be greater than or equal to 0.

2-2. 뱃지

📌 Link: https://simpleicons.org/

1. README.md에 아래 코드 복사 붙여넣기

🎀 저는 헤더의 아래에 작성하였습니다.

<img src="https://img.shields.io/badge/버튼에표시할내용-색상코드?style=뱃지모양&logo=로고&logoColor=로고색상"/>

아래는 코드에 대한 설명입니다.
학부 과정에서 배운 C를 예시로 들어 설명하겠습니다.

2. 위의 코드에서 한국어로 적힌 부분만 수정해주면 됩니다.

1. 버튼에 표시할 내용, 로고, 색상 코드

그림에 적힌 대로 코드에 작성해주면 됩니다. logo= 뒤에 버튼에 표시할 내용 적어주면 로고 모양이 나옵니다.

<img src="https://img.shields.io/badge/C-A8B9CC?style=뱃지모양&logo=C&logoColor=로고색상"/>

2. style, logo

📌 Link: https://shields.io/

위의 코드에서 style= 뒤에 원하는 로고 모양 선택해서 작성해주면 됩니다. 저는 flat으로 통일해 사용했습니다.

<img src="https://img.shields.io/badge/적고싶은 내용-A8B9CC?style=flat&logo=C&logoColor=white"/>

3. 버튼에 링크 연결
   

위에서 사용한 코드와 거의 유사합니다.

<a href="연결하고 싶은 링크"><img src="https://img.shields.io/badge/적고싶은 내용-색상?style=스타일&logo=로고&logoColor=white&link=연결 링크"/></a>

완성본

README.md 상세 코드는 제 깃허브로 들어오면 확인 가능합니다.

📌 Link: https://github.com/Chae0510

스탯 표시, pin 고정은 아직 완성도가 떨어져서 2탄으로 따로 제작