티스토리 블로그에서 사진을 삽입할 때 기본적으로 세로로 정렬되지만,
간단한 HTML과 CSS를 활용하면 이미지를 가로로 나란히 배치할 수 있습니다.
이번 글에서는 쉽고 효과적인 방법을 소개합니다.
티스토리에서 기본적으로 사진이 세로로 배치되는 이유
티스토리는 기본적으로 사진을 블록(block) 요소로 처리하기 때문에
이미지가 자동으로 세로로 정렬됩니다.
따라서 이미지를 가로로 배치하려면 추가적인 스타일을 적용해야 합니다.
티스토리에서 사진을 나란히 정렬하는 방법
1. 사진을 드래그해서 옮기는 방법
1. 필요한 사진 수량을 불러옵니다.
2. 사진 한장을 선택 후 드래그해서 옆으로 옮깁니다.
3. 사진 사이에 붉은색 선이 보이면 사진을 놓습니다.
4. 사진이 나란히 놓인 것을 볼 수 있습니다.
2. HTML 코드 활용 (테이블 사용)
HTML의 <table> 태그를 사용하면 쉽게 사진을 나란히 정렬할 수 있습니다.
<table>
<tr>
<td><img src="이미지1_URL" width="300"></td>
<td><img src="이미지2_URL" width="300"></td>
</tr>
</table>위 코드에서 width="300" 속성을 사용하여 이미지 크기를 조정할 수 있습니다.
3. CSS를 활용한 가로 정렬 (Flexbox 사용)
CSS의 Flexbox를 이용하면 보다 유연하게 이미지를 정렬할 수 있습니다.
<div style="display: flex; gap: 10px;">
<img src="이미지1_URL" width="300">
<img src="이미지2_URL" width="300">
</div>display: flex;를 사용하면 사진이 가로로 정렬되며, gap: 10px;을 추가하면 이미지 사이의 간격을 조정할 수 있습니다.
4. 인라인 블록 요소 활용
CSS의 display: inline-block; 속성을 사용하여 이미지를 정렬하는 방법도 있습니다.
<div style="text-align: center;">
<img src="이미지1_URL" width="300" style="display: inline-block; margin-right: 10px;">
<img src="이미지2_URL" width="300" style="display: inline-block;">
</div>이 방법은 간단하지만 이미지 개수가 많아질 경우 자동 정렬이 어려울 수 있습니다.
사진을 나란히 배치할 때 주의할 점
- 모바일에서도 잘 보이도록 반응형 디자인을 고려해야 합니다.
- 이미지 크기가 일정하지 않으면 균형이 맞지 않을 수 있으므로 가로 폭을 맞추는 것이 중요합니다.
- 너무 많은 이미지를 한 줄에 배치하면 가독성이 떨어질 수 있으니 적절한 개수를 조정하는 것이 좋습니다.
마무리
티스토리에서 사진을 가로로 나란히 배치하는 방법에는 여러 가지가 있지만,
Flexbox를 활용하면 가장 직관적이고 반응형으로 조절이 가능합니다.
블로그 레이아웃과 목적에 맞는 방법을 선택하여 적용해 보세요!