1. 프로필 만들기
다른 개발자분들의 깃허브를 구경하다 보면 repo가 엄청 많은 것도 놀랍지만
프로필도 나랑은 다르게 굉장히 이쁘고 깔끔한 것을 볼 수 있습니다.
탐나니까 가져야겠죠!ㅎㅎ
이제 프로필부터 만들어보겠습니다.
이건 제 깃허브 프로필입니다!
그중에서 우리는 이 부분을 만들어보겠습니다.
이제 이미 계정이 있다는 전제하에 진행하도록 하겠습니다.
깃허브 프로필에 들어옵니다.
이렇게 아무것도 없는 상태의 프로필로 들어와 주시면 됩니다.
이제 우리가 늘 해오던 repository를 생성하겠습니다.
이렇게 본인의 계정이름으로 Repository name을 입력해 주세요.
그럼 밑에서 자동적으로 특별한 repo이름이라서 프로필에서의 리드미를 보여줄 거라고 설명해 줍니다.
그리고 밑에 체크 박스 Add README file을 체크하고 repo를 만들어줍니다.
자 이제 이 화면까지 보인다면 준비는 끝났습니다.
캔버스는 준비가 되었으니 예쁜 걸로 채워보면 되겠습니다.
2. 스택 뱃지 만들기
바로 한번 만들어 보겠습니다.
우선 우리가 알아야 할 두가지 사이트가 있습니다.
1. Sheilds io : 우리가 뱃지를 만들어 올 사이트 입니다.
Static Badge | Shields.io
One of the named logos (bitcoin, dependabot, gitlab, npm, paypal, serverfault, stackexchange, superuser, telegram, travis) or simple-icons. All simple-icons are referenced using icon slugs. You can click the icon title on simple-icons to copy the slug or t
shields.io
2. Simple Icons : 뱃지를 만들 때 들어갈 색을 찾아올 사이트입니다.
Simple Icons
2666 Free SVG icons for popular brands
simpleicons.org
자 그럼 본격적으로 Sheildsio 사이트에 들어가 보겠습니다.
온통 영어로 되어 있습니다.
(우리 뇌내에는 흥선대원군의 척화비가 심어져 있는 듯 합니다...)
하지만 걱정할 것 없이 굉장히 간단히 사용할 수 있습니다.
우선 토글을 눌러 세부 옵션들을 열어주겠습니다.
꽤 길지만 별다른 의미는 없습니다.
위에 해설을 붙였으니 이대로 한번 HTML뱃지를 만들어 보겠습니다.
저는 이렇게 작성해줬습니다.
그럼 결과물은 Excute를 눌러주면 바로 밑에 생성되어 확인 하실 수 있습니다.
리드미는 Markdown으로 작성하기 때문에 마크다운 으로 링크를 복사해서 가져가겠습니다.
다시 깃허브로 돌아와서 보겠습니다.
이제 저 수정 버튼을 누르고 아까 복사해온 링크를 붙여넣어 주겠습니다.
그리고 이제 Commit change를 눌러주면!!
오!! 잘 삽입이 된 것을 볼 수 있습니다!ㅎㅎ
생각보다 쉽지 않나요?
이렇게 원하는 뱃지를 찾아 넣을 수 있습니다.
그럼 아까 simple Icons는 왜 보여준거고 어디에 쓰는거지?
라고 생각하실 수 있는데요.
뱃지의 로고 색이나 배경색은 전적으로 개인의 취향이기 때문에 커스텀을 할 수 있는데요.
로고 색에 icon의 색을 넣어도 되고요. 글자색에 아이콘 색을 적용해도 됩니다.
즉, 색 반전을 해도 된다는 의미입니다.
예시를 보여드리겠습니다.
이렇게 사이트에서 자바스크립트의 이미지의 색을 복사합니다. AF7DF1E가 있죠?
이런식으로 작성해서 반전 효과를 줄 수 있습니다.
3. 헤더, 푸터 만들기
자 이제 이전에 봤던 그 머리말 부분에 쓰이는 Header와
이미지에는 보이지 않았지만 바닥부분에 있는 Footer를 만들어 보겠습니다.
사용 방법은 여기에서도 볼 수 있습니다!
GitHub - kyechan99/capsule-render: 🌈 Dynamic Coloful Image Render
🌈 Dynamic Coloful Image Render. Contribute to kyechan99/capsule-render development by creating an account on GitHub.
github.com
제가 원하는 모양을 만들고 만들어 볼거구요.
여러분은 만드는 방법을 이해하고 여러분만의 헤더를 만들어 적용해보면 되겠습니다!
모양은 이렇게 있습니다.
꽤 다양하니까 원하는 레이아웃을 둘러보고 선택하시면 되겠네요.
저는 실린더를 선택했구요.
리드미는 마크다운을 지원하기 때문에 마크다운 API를 선택했습니다.
원하는 속성값을 찾기 위해서는 이전에 올려드린 깃허브 링크로 들어가 보세요.
네비게이션이 잘 달려 있으니까요.
한번 속성들을 둘러보고 하나씩 적용해보고 수정해나가시면 되겠습니다.
//기존의 만들어진 예시 코드 형식
//새롭게 만들 마크다운 코드
이코드는 단순한 예시 그림에서 나온 그대로이기 때문에 우리가 원하는 레이아웃으로 바꿔줘야 합니다.
이제 마크다운 코드에 원하는 속성을 하나씩 붙여주면 됩니다.
저는 실린더 타입을 쓸것이기 때문에
이렇게 타입을 지정해줍니다.
그리고 색도 지정해주겠습니다.
시간에 따라 바뀌는 그라디언트로 지정했습니다.
이어서 원하는 속성들을 하나씩 적용해주면 다음과 같은 코드가 됩니다.
그리고 이제 이 코드를 깃허브 프로필로 가서 붙여 넣어보겠습니다.
이렇게 잘 들어온 걸 볼 수 있습니다!
이제 Footer도 역시 똑같이 진행하면 되겠습니다.
코드의 가장 밑에 삽입하고,
태그를 footer로만 바꿔주면 완성입니다!
4. 백준 레벨 뱃지
백준 레벨 뱃지는 백준에 계정이 있다는 전제로 진행하겠습니다.
저는 제 백준 계정을 입력했는데요.
여러분은 여러분의 계정을 입력하시면 되겠습니다!
// 예시 코드
[](https://solved.ac/loading98)
// 코드 템플릿
[](https://solved.ac/여러분의계정)
완성된 백준 뱃지 입니다.
5.깃허브 레벨 뱃지
이 뱃지는 깃허브의 활동을 점수화하여 보여주는 지표입니다.
이것도 역시 제 깃허브 계정을 입력해 놓은 것이고요.
밑에 있는 코드 템플릿을 복사해서 여러분의 계정이름을 넣어주시면 되겠습니다.
// 코드 예시
// 코드 템플릿
완성하면 이런 모양의 뱃지를 삽입할 수 있습니다!!
이제 여러분만의 뱃지로 프로필을 꾸며보세요!
'👾Git & GitHub > Git to GitHub' 카테고리의 다른 글
| [한번에 끝내는 Git과 Github 기초] (0) | 2023.07.15 |
|---|
