Velog에서만 테스트했기 때문에, Github이나 다른 마크다운 사이트에서도 잘 되는지는 모르겠다. 혹시 해볼 분이 계시다면 댓글로 결과 살짝 귀띔해주길.

+) 2020 11 09 현 시점 기준 캡션이 제대로 작동하지 않는 것으로 보임

++) 2020 12 15 다음 코드 정상 작동 확인

+++) 2021 05 01 스타일 업데이트 : 마진 제거, 회색 처리 (바로 아래 코드)

<p align="center" style="color:gray">
  <img src="imageURL" style="padding: 0;margin:0;">
  This is an image
</p>

예시 : https://velog.io/@roeniss/chrome-extention-%EA%B0%9C%EB%B0%9C%EA%B8%B0

이미지 중앙 정렬

<p align="center">
  <img src="url" alt="text" width="number" />
</p>
<!-- width는 생략할 수 있다. alt는 가급적이면 적자. -->

예시:

<p align="center">
  <img src="https://images.velog.io/images/roeniss/post/c208ff41-6002-4e24-8d10-9ce5dd2e0ac0/1.jpg" alt="factorio thumbnail"/>
</p> 

이미지 중앙 정렬 & 캡션

<p align="center">
  <img src="url" alt="text" width="number" />
  캡션 메시지
</p>
<!-- width는 생략할 수 있다. alt는 가급적이면 적자. -->

예시:

<p align="center">
  <img src="https://images.velog.io/images/roeniss/post/c208ff41-6002-4e24-8d10-9ce5dd2e0ac0/1.jpg" alt="factorio thumbnail"/>
  팩토리오 재밌다
</p> 

팩토리오 재밌다

보다시피 velog에서는 마진 때문에 조금 어색한 캡션이 생겼다. 추가 스타일을 적용해보자.

이미지 중앙 정렬 & 캡션 & 스타일

<p align="center" style="..."> 
  <img style="..." src="url" alt="text" width="number" />
  캡션 메시지
</p>
<!-- width는 생략할 수 있다. alt는 가급적이면 적자. -->

예시:

<p align="center" style="color:gray">
  <!-- 마진은 위아래만 조절하는 것이 정신건강에 좋을 듯 하다. 이미지가 커지면 깨지는 경우가 있는 듯 하다.-->
  <img style="margin:50px 0 10px 0" src="https://images.velog.io/images/roeniss/post/c208ff41-6002-4e24-8d10-9ce5dd2e0ac0/1.jpg" alt="factorio thumbnail" width=200 />
  팩토리오 재밌다
</p> 

팩토리오 재밌다

만족.

ps. 크기 조절이 잘 되지 않는다면 width를 witdh로 잘못 쓰진 않았는지 확인해볼 것.

ps2. 태그 사용 이후 그 아래 라인부터 다른 태그 (라던가 라던가 라던가)들이 사용이 안된다면, (1) 태그에 덜 마무리된 부분이 있는지 확인하고 (2) 태그 마지막 줄과 다음 본문 사이 한 줄 떨어뜨려 놓아볼 것. 예를 들면,

<!-- ... -->
</p>
이렇게 하면 이후 태그가 안먹힘

반면,

<!-- ... -->
</p>

이렇게 하면 이후 태그가 먹힘

그러하다.

이 방식의 대부분은 이 글을 차용함