[Github] 깃허브 페이지에 이미지 올리는 법

깃허브 페이지에 이미지 올리는 법

깃허브 블로그를 운영하시는 초심자 분들!!

혹시 이미지가 제대로 올라가지 않아 헤매고 계신가요..?ㅠㅠ

저도 깃허브 블로그를 개설한지 얼마 되지 않는터라 여러 시행착오들을 겪고 있답니다…ㅎㅎ

아무튼 각설하고!! 깃허브 페이지에 이미지 업로드 하는법을 알려드릴게요

아, 이 포스팅은 typora에 이미지 올리는 것을 기준으로 작성된 포스트입니다. typora가 아닌 곳에 이미지를 올리고 싶으시다면 아래 과정에서 typora에 해당하는 부분만 빼고 진행하시면 됩니다 ㅎㅎ

1. typora 위쪽에 YAML Front Matter를 추가합니다.

• YAML Front Matter가 뭐냐!! 하시는 분들 계실텐데, 아래 사진을 보시죠.

저 ‘—‘로 감싸져 있는 부분이 YAML Front Matter입니다.

Typora에 이미지를 삽입하시려면 저 부분을 추가하셔야 해요!!

1. assets 디렉터리 밑에 images 디렉터리를 만들어서 이미지 파일들을 넣습니다.

저는 파일들이 깔끔하게 정리되어 있는 것을 좋아하기 때문에, 이미지 파일들을 저장해놓을 디렉터리를 따로 만들어놓습니다. 밑에서 꼭 이미지를 저장하지 않아도 이미지를 올릴 수 있는 방법에 대해서 설명하겠습니다.

1. 이미지를 넣을 곳에 링크를 넣습니다.

• HTML 문법

  • 절대 경로

    ![이미지 제목](이미지가 저장되어 있는 절대 경로)

  • 상대 경로

    ![이미지 제목](../assets/images/이미지 파일명)

• 추가로, 이미지의 사이즈 조절이나 정렬을 원할 때는 아래처럼 하면 됩니다.

  • 이미지 사이즈 조절

    ![이미지 제목](이미지 경로){:width="50%", height="50%"}

  • 이미지 정렬

    • 먼저 css 파일을 만들고 가운데 정렬 속성을 부여한 후, 이미지에 적용

      .center{ display: block; maring: auto; }

    • 그 다음에 마크다운 파일에서 이미지에 적용

      ![이미지 제목](이미지 경로){:width="50%", height="50%"}{: .center}

부록

그런데 나는 이미지 폴더를 따로 관리하기 귀찮다! 하시는 분들을 위해 밑의 방법도 알려드립니다 ㅎㅎ

1. 위의 방법과 마찬가지로 typora에 YAML Front Matter를 추가해줍니다.
2. 본인 깃허브 레포지토리에서 Issues를 클릭합니다.
3. 아래 화면에서 New Issue를 클릭학니다.

1. 아래 화면에서 Open a blank issue를 클릭합니다.

   

2. 아래 화면의 텍스트 박스에 업로드를 원하는 이미지 파일을 드래그 앤 드롭합니다!

   

3. 그러면 아래 그림처럼 해당 이미지 파일의 링크가 나오는데, 그 링크가 해당 이미지 파일의 링크입니다! Submit new issue를 누르지 않아도 사용할 수 있습니다.

   

자 이상으로! 깃허브 페이지에 이미지 업로드 하는 법 포스팅을 마치겠습니다.

우리 모두 하나씩 배워가며 자신이 원하는 블로그를 만들어봐요!!

그럼 안녕!