Skip to main content
설명서에 자주 업데이트를 게시하며 이 페이지의 번역이 계속 진행 중일 수 있습니다. 최신 정보는 영어 설명서를 참조하세요.
GitHub AE는 현재 제한된 릴리스에 있습니다.
All products
시작

GitHub에서 쓰기 위한 빠른 시작

이 문서의 내용

gist를 만들어 자신을 설명하는 고급 서식 기능을 알아봅니다.

소개

Markdown은 일반 텍스트 서식을 지정하기 위한 읽기 쉽고 쓰기 쉬운 언어입니다. 일부 추가 HTML 태그와 함께 Markdown 구문을 사용하여 리포지토리 README 및 끌어오기 요청 및 문제에 대한 메모와 같은 위치에서 GitHub에 대한 쓰기 형식을 지정할 수 있습니다. 이 가이드에서는 gist을(를) 만들어 몇 가지 고급 서식 지정 기능을 알아봅니다.

Markdown을 새로 사용하는 경우 "기본 쓰기 및 서식 지정 구문" 또는 Markdown을 사용하여 통신 GitHub Skills 과정으로 시작하는 것이 좋습니다.

gist 만들기

Gists를 사용하면 엔터프라이즈에서 코드 조각 및 기타 정보를 다른 사용자와 저장하거나 공유할 수 있습니다. gists의 서식 기능을 사용하려면 확장명 있는 gist 파일을 .md 추가합니다.

  1. gist 홈페이지, http(s)://gist.[hostname]로 이동합니다.
  2. 필요에 따라 gist에 대한 설명(예: "내 정보")을 입력합니다.
  3. 확장명을 포함한 파일 이름... 필드에 를 입력합니다 about-me.md.

자세한 내용은 "gist 만들기"을 참조하세요.

방문자에 맞게 이미지 추가

GitHub의 통신에 이미지를 포함할 수 있습니다. 여기서는 gist의 맨 위에 배너와 같은 반응형 이미지를 추가합니다.

미디어 기능과 함께 prefers-color-scheme HTML <picture> 요소를 사용하면 방문자가 밝은 모드 또는 어두운 모드를 사용하는지 여부에 따라 변경되는 이미지를 추가할 수 있습니다. 자세한 내용은 "테마 설정 관리"을 참조하세요.

  1. 다음 태그를 복사하여 파일에 붙여넣습니다.

    HTML
    <picture>
 <source media="(prefers-color-scheme: dark)" srcset="YOUR-DARKMODE-IMAGE">
 <source media="(prefers-color-scheme: light)" srcset="YOUR-LIGHTMODE-IMAGE">
 <img alt="YOUR-ALT-TEXT" src="YOUR-DEFAULT-IMAGE">
</picture>

  2. 태그의 자리 표시자를 선택한 이미지의 URL로 바꿉 있습니다. 또는 기능을 먼저 시도하려면 아래 예제에서 URL을 복사할 수 있습니다.

    • 를 어두운 모드를 사용하여 방문자에게 표시할 이미지의 URL로 바꿉 YOUR-DARKMODE-IMAGE 니다.
    • 를 조명 모드를 사용하여 방문자에게 표시할 이미지의 URL로 바꿉 YOUR-LIGHTMODE-IMAGE 니다.
    • 를 다른 이미지와 일치시킬 수 없는 경우(예: 방문자가 기능을 지원하지 않는 브라우저를 사용하는 경우) 표시할 이미지의 prefers-color-scheme URL로 바꿉 YOUR-DEFAULT-IMAGE 니다.

  3. 화면 읽기 프로그램을 사용하는 방문자가 이미지에 액세스할 수 있도록 하려면 를 이미지에 대한 설명으로 바꿉 YOUR-ALT-TEXT

  4. 이미지가 올바르게 렌더링되었는지 확인하려면 미리 보기 탭을 클릭합니다.

Markdown에서 이미지를 사용하는 방법에 대한 자세한 내용은 "기본 쓰기 및 서식 지정 구문.

반응형 이미지의 예

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/25423296/163456776-7f95b81a-f1ed-45f7-b7ab-8fa810d529fa.png">
  <source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/25423296/163456779-a8556205-d0a5-45e2-ac17-42d089e3c3f8.png">
  <img alt="Shows an illustrated sun in light mode and a moon with stars in dark mode." src="https://user-images.githubusercontent.com/25423296/163456779-a8556205-d0a5-45e2-ac17-42d089e3c3f8.png">
</picture>

이미지 모양

라이트 모드의 GitHub 주석의 "미리 보기" 탭 스크린샷 웃는 태양의 이미지가 상자를 채웁니다.

테이블 추가

Markdown 테이블을 사용하여 정보를 구성할 수 있습니다. 여기서는 표를 사용하여 가장 많이 사용되는 프로그래밍 언어 또는 프레임워크, 학습 시간을 보내는 항목 또는 좋아하는 취미와 같은 순위를 지정하여 자신을 소개합니다. 테이블 열에 숫자가 포함된 경우 머리글 행 아래 구문을 --: 사용하여 열을 오른쪽에 맞추는 것이 유용합니다.

  1. 편집 새 파일 탭으로 돌아갑니다.

  2. 태그 아래에 두 줄의 </picture> 자신을 소개하려면 다음과 같이 머리글과 자신에 대한 짧은 단락을 추가 ## About me 합니다.

    ## About me

Hi, I'm Mona. You might recognize me as GitHub's mascot.

  3. 이 단락 아래에 두 줄씩 다음 태그를 복사하여 붙여넣어 표를 삽입합니다.

    Markdown
    | Rank | THING-TO-RANK |
|-----:|---------------|
|     1|               |
|     2|               |
|     3|               |

  4. 오른쪽 열에서 를 "언어", "취미" 또는 기타 항목으로 바꾸고 THING-TO-RANK 열을 항목 목록으로 채웁니다.

  5. 테이블이 올바르게 렌더링되었는지 확인하려면 미리 보기 탭을 클릭합니다.

자세한 내용은 "테이블로 구성 정보"을 참조하세요.

테이블의 예

## About me

Hi, I'm Mona. You might recognize me as GitHub's mascot.

| Rank | Languages |
|-----:|-----------|
|     1| Javascript|
|     2| Python    |
|     3| SQL       |

테이블의 모양

GitHub 주석의 "미리 보기" 탭 스크린샷 "내 정보" 제목 아래에는 순위가 지정된 언어 목록이 있는 렌더링된 테이블이 있습니다.

축소된 섹션 추가

콘텐츠를 깔끔하게 유지하기 위해 태그를 <details> 사용하여 확장 가능한 축소된 섹션을 만들 수 있습니다.

  1. 만든 테이블에 대해 축소된 섹션을 만들려면 다음 예제와 같이 태그로 <details> 테이블을 래핑합니다.

    HTML
    <details>
<summary>My top THINGS-TO-RANK</summary>

YOUR TABLE

</details>

  2. <summary> 태그 간에 를 테이블에 순위가 지정된 항목으로 바꿉 THINGS-TO-RANK 니다.

  3. 필요에 따라 섹션이 기본적으로 열려 있는 것으로 표시되도록 하려면 태그에 open <details> 특성을 추가합니다.

    <details open>

  4. 축소된 섹션이 올바르게 렌더링되었는지 확인하려면 미리 보기 탭을 클릭합니다.

축소된 섹션의 예

<details>
<summary>My top languages</summary>

| Rank | Languages |
|-----:|-----------|
|     1| Javascript|
|     2| Python    |
|     3| SQL       |

</details>

축소된 섹션의 모양

메모의 "미리 보기" 탭 스크린샷 "Top languages"라는 단어의 왼쪽에는 섹션을 확장할 수 있음을 나타내는 화살표가 있습니다.

따옴표 추가

Markdown에는 콘텐츠 서식을 지정하는 다른 많은 옵션이 있습니다. 여기서는 페이지를 나누는 가로 규칙과 즐겨 찾는 따옴표의 서식을 지정하는 blockquote를 추가합니다.

  1. 파일 아래쪽에 태그 아래에 두 줄이 있는 </details> 경우 세 개 이상의 대시를 입력하여 가로 규칙을 추가합니다.

    ---

  2. 줄 아래에 --- 다음과 같이 태그를 입력하여 따옴표를 추가합니다.

    > QUOTE

    QUOTE 을 원하는 따옴표로 대체합니다. 또는 아래 예제에서 따옴표를 복사합니다.

  3. 모든 항목이 올바르게 렌더링되었는지 확인하려면 미리 보기 탭을 클릭합니다.

따옴표의 예

---
> If we pull together and commit ourselves, then we can push through anything.

— Mona the Octocat

따옴표 모양

GitHub 주석의 "미리 보기" 탭 스크린샷 따옴표는 두꺼운 가로줄 아래에 들여쓰기됩니다.

메모 추가

HTML 주석 구문을 사용하여 출력에 숨겨질 주석을 추가할 수 있습니다. 여기서는 gist 나중에 업데이트할 것을 상기시키는 메모를 추가합니다.

  1. 머리글 아래에 두 줄 아래에 ## About me 다음 태그를 사용하여 주석을 삽입합니다.

    <!-- COMMENT -->

    를 나중에 수행하도록 미리 알려주는 "할 일" 항목으로 바꿉 COMMENT 니다(예: 테이블에 항목을 더 추가).

  2. 출력에 메모가 숨겨져 있는지 확인하려면 미리 보기 탭을 클릭합니다.

메모의 예

## About me

<!-- TO DO: add more details about me later -->

작업 내용 저장

변경 내용에 만족하면 gist를 저장합니다.

  • 검색 엔진에서 gist를 숨기지만 URL을 공유하는 모든 사용자에게 표시하려면 비밀 gist 만들기를 클릭합니다.
  • 엔터프라이즈의 모든 사용자에게 gist를 표시하게 되어 기쁘다면 내부 gist 만들기를 클릭합니다.

다음 단계

  • 고급 서식 지정 기능에 대해 계속 알아봅니다. 예를 들어 "코드 블록 만들기 및 강조 표시"을 참조하세요.
  • 문제, 끌어오기 요청 및 토론에서 GitHub 간에 통신할 때 새 기술을 사용합니다. 자세한 내용은 "GitHub에서 통신"을 참조하세요.