[TIL] Velog에서 이미지를 나란히 배치하는 방법

1. Markdown으로 이미지 나란히 배치하기

Markdown 기본 문법으로 이미지를 한 줄에 나란히 배치하려면, 두 이미지를 같은 줄에 공백으로 구분해서 작성할 수 있습니다.

![이미지1](이미지1_URL) ![이미지2](이미지2_URL)

이 방식은 이미지 크기가 크지 않을 때만 유효합니다. 이미지 크기가 클 경우에는 한 줄에 배치되지 않을 수 있습니다.

|

❌하지만 벨로그에서 사용할 수 없습니다....❌

2. HTML 태그 사용 Flexbox 스타일 적용

Velog에서는 HTML 태그를 사용할 수 있기에 시도 해봤습니다. <img> 태그만을 사용해서 나란히 배치할 수 없음을 알기에 Flexbox 스타일을 적용해보았는데요.

<img src="이미지1_URL" alt="이미지1" width="150"> <img src="이미지2_URL" alt="이미지2" width="150">

<div style="display: flex; gap: 10px;">
	<img src="이미지1_URL" alt="이미지1" width="150"> <img src="이미지2_URL" alt="이미지2" width="150">
</div>

❌역시나 벨로그에서 사용할 수 없습니다....❌

3. Markdown 테이블 사용하기

벨로그 에서는 결국 Markdown의 테이블 문법을 사용해야지만 이미지를 나란히 배치할 수 있습니다.

| ![이미지1](이미지1_URL) | ![이미지2](이미지2_URL) |
|--------------------------|--------------------------|

| <img src="이미지1_URL" alt="이미지1" width="200"> | <img src="이미지2_URL" alt="이미지2" width="200"> |
|-------------------------------------------------------|-------------------------------------------------------|

5. 정리

• Markdown 기본 문법: 이미지들을 한 줄에 나란히 배치하지만, 크기 조정이 어려움. 벨로그 벨로그에서 사용할 수 없음 ❌
• HTML 태그 사용: 이미지 크기를 조절하고 나란히 배치하는 가장 유연한 방법이지만 벨로그 벨로그에서 사용할 수 없음 ❌
• 테이블 사용: 이미지 정렬을 깔끔하게 할 수 있는 방법으로, HTML 태그와 병행 가능. 좀 못생겼지만 벨로그에서 사용할 수 있음 ⭕️