[Github] 마크다운에 이미지를 넣고 싶을 때

22g.young·2024년 9월 9일

README.md 파일을 작성하거나 Github 블로그 같은 곳에 글을 쓰다 보면 이미지 파일을 올려야 할 때가 생긴다. 이미지를 올리는 방법은 여러 개인데 그 중 가장 간단한 방법을 공유한다.

우선, 마크다운에서 이미지를 첨부하려면 두 가지 형식을 사용할 수 있다.

1. 마크다운 형식
![이미지 이름](이미지 주소)
![test](https://.../test.png)

2. HTML 형식
<img src="이미지 주소">
<img src="https://.../test.png">

1. 이미지 주소를 복사할 수 있는 경우

구글 등에서 이미지를 마우스 우클릭하면 이미지 주소 복사를 할 수 있다.

이 때 복사한 이미지 주소를 형식에 맞춰 넣어 주면 된다.

⬇️ 코드

![test](https://img1.newsis.com/2023/07/12/NISI20230712_0001313626_web.jpg)

⬇️ 결과물
test

2. 이미지 주소를 복사할 수 없는 경우

  1. 일단 Github에 접속해 아무 Repository에 들어간다.
  2. 페이지 좌상단의 Issues를 클릭하면 나타나는 New issue 버튼을 누른다.
  3. 본문을 작성할 수 있는 부분에 이미지를 복사 + 붙여넣기 하거나 드래그 앤 드롭한다.
  4. 그리고 잠시 기다리면 이미지 주소가 생성된다.
이미지가 올라가는 중에 이런 문구가 뜬다
  1. 생성된 주소를 복사해 형식에 맞춰 마크다운에 입력한다.

⬇️ 코드

![test](https://github.com/user-attachments/assets/637bcaef-8415-45e1-945d-a72dadcad136)

⬇️ 결과물
m_20190424221842_alwsmiwa

이미지 사이즈 조정하기

위에서 마크다운에 사용할 수 있는 형식이 두 가지 있다고 했다.
마크다운 형식을 사용한다면 사이즈를 조절할 수 없다. 이 때는 html 형식을 사용해 조절하면 된다.

⬇️ 코드 (width 50%)

<img src="https://github.com/user-attachments/assets/637bcaef-8415-45e1-945d-a72dadcad136" width="50%"/>

⬇️ 결과물

참고
https://caileb.tistory.com/201
https://aiday.tistory.com/83

0개의 댓글