이전에는 Github 프로필을 맞춤 설정할 수 있는 유일한 방법은 사진을 업데이트하거나 이름을 변경하는 것이었습니다. 이는 모든 Github 프로필이 동일해 보이고 이를 사용자 정의하거나 눈에 띄게 하는 옵션이 최소화되었음을 의미합니다.

이후부터 Markdown을 사용하여 사용자 정의 섹션을 만들 수 있는 옵션이 제공됩니다. 이력서, 관심사, 취미를 포함하여 프로필에 자신이 누구인지 반영할 수 있습니다. 이는 누구나 귀하의 프로필에 접속할 때 보게 되는 주요 섹션 중 하나입니다.

이 글에서는 Github Readme를 조금 변형하여 만든 방법을 보여드리겠습니다. 나는 Markdown을 사용하고 그것의 주요 문제를 해결할 것입니다. 색상을 변경할 수 없고 위치와 간격을 조정하는 것이 어려울 수 있기 때문에 매우 제한적일 수 있다는 문제가 있습니다. 이 문제를 해결하려면 Github 추가 정보에 CSS를 추가하고 전환을 추가하여 더 나은 UX를 제공할 수 있는 방법이 있습니다.

하지만 먼저 Readme 작성부터 시작해 보겠습니다. 이를 위해서는 Github 사용자 이름과 정확히 일치하는 새로운 공개 저장소를 만들어야 합니다. 이것이 고유한 저장소가 될 것임을 보여주는 작은 텍스트가 표시됩니다.

이제 [README.md]() 파일에서 업데이트하는 내용이 프로필에 표시됩니다. Markdown 구문이나 HTML을 사용하여 콘텐츠를 표시할 수 있습니다. 인라인 스타일, CSS 파일 또는 JavaScript를 추가하면 Github에서 제거되므로 솔루션이 필요하지 않습니다.

해결책

README.md 파일에 이미지를 포함할 수 있습니다. 여기에는 SVG 파일이 포함됩니다. CSS를 추가할 수 있는 허점은 SVG 파일의 foreignObject 요소를 사용하여 사용자 정의 HTML 및 CSS를 삽입하는 것입니다. foreignObject 요소를 사용하면 SVG 그래픽 내에 다른 마크업 언어의 요소를 포함할 수 있습니다.

저장소에 header.svg라는 새 파일을 만들어 보겠습니다. 내 경우에는 프로필에 CodeFlow.라는 텍스트가 멋진 그라데이션과 타자기 효과와 함께 표시되기를 원합니다. 이를 달성하기 위해 SVG 파일의 foreignObject에 중첩된 CSS와 HTML을 작성했습니다.

이제 이 SVG를 이미지로 사용하고 프로필에 표시하도록 README.md 파일을 업데이트해 보겠습니다.

그리고 그게 다입니다. 실제로는 SVG 안에 감싸인 CSS와 HTML일 뿐입니다. 아래에서 최종 결과를 확인하거나 실제로 실행되는 모습을 보고 싶다면 내 Github 프로필이 여기에 있습니다.