CSS로 Github 프로필을 돋보이게 만드세요

이전에는 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 fill="none" width="100%"  xmlns="http://www.w3.org/2000/svg">
 <foreignObject width="100%" height="100%">
  <div xmlns="http://www.w3.org/1999/xhtml">
      <style>
        .wrapper {
          height: 100vh;
          display: grid;
          place-items: center;
        }

        .text {
          width: 9ch;
          animation: typing 1.5s steps(9), blink .5s step-end infinite alternate;
          white-space: nowrap;
          overflow: hidden;
          border-right: 3px solid;
          font-family: monospace;
          font-size: 4em;
          background: linear-gradient(90deg, rgba(0,241,220,1) 0%, rgba(86,115,241,1) 44%, rgba(103,68,241,1) 54%, rgba(254,0,255,1) 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        @keyframes typing {
          from {
            width: 0
          }
        }

        @keyframes blink {
          from, to { border-color: transparent }
          50% { border-color: rgba(254,0,255,1); }
        }
      </style>
      <div class="wrapper">
        <div class="text">
          CodeFlow.
        </div>
      </div>
  </div>
 </foreignObject>
</svg>

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

<div align="center">
 <a class="link" href="https://github.com/codeflowjs/codeflowjs/blame/main/header.svg">
  <img class="image" src="header.svg" alt="Click to see the source">
 </a>
</div>

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

위 내용은 CSS로 Github 프로필을 돋보이게 만드세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!