블로그 사진 여러 장 나란히 정렬하는 방법 – HTML 표와 CSS 활용 완전 정복
블로그에 사진을 나란히 배치해야 하는 이유
블로그를 운영하다 보면 사진 한 장보다 여러 장을 나란히 배치할 때 훨씬 보기 좋은 경우가 많습니다. 상품 비교, 전후 사진, 여행 사진 갤러리 등이 대표적인 예입니다. 사진을 나란히 배열하면 독자가 한눈에 내용을 비교하거나 파악할 수 있어 가독성이 크게 높아집니다. 특히 모바일 환경에서도 깔끔하게 보이는 레이아웃은 방문자 이탈률을 줄이는 데 큰 역할을 합니다.
티스토리에서 사진 여러 장을 나란히 배열하는 구체적인 방법이 궁금하다면 티스토리 사진 여러장 나란히 배열하는 방법을 참고해보세요. 이 글에서는 워드프레스를 포함한 다양한 블로그 플랫폼에서 활용할 수 있는 방법을 폭넓게 다루겠습니다.
HTML 표(Table)를 이용한 사진 나란히 배치
가장 기본적이면서 호환성이 높은 방법은 HTML 표를 활용하는 것입니다. 별도의 CSS 지식 없이도 적용할 수 있어 초보 블로거에게 특히 추천합니다.
기본 구조는 다음과 같습니다. 표의 각 칸에 이미지를 넣는 방식으로, 2열 또는 3열로 사진을 나란히 배치할 수 있습니다.
- 2열 배치: td 태그 두 개에 각각 img 태그 삽입, width를 50%로 설정
- 3열 배치: td 태그 세 개 사용, width를 33%로 설정
- 테두리 제거: table 태그에 border=0 속성 추가로 깔끔한 레이아웃 완성
표 방식은 오래된 방법이지만 대부분의 블로그 에디터와 브라우저에서 안정적으로 작동한다는 장점이 있습니다.
CSS Flexbox로 반응형 사진 갤러리 만들기
조금 더 세련되고 반응형에 강한 레이아웃을 원한다면 CSS Flexbox를 활용하는 방법이 있습니다. 화면 크기에 따라 자동으로 열 수가 조정되어 모바일에서도 보기 좋은 레이아웃을 만들 수 있습니다.
- display: flex 속성을 부모 div에 적용하여 자식 요소들을 가로로 나열
- flex-wrap: wrap으로 화면이 좁아질 때 자동 줄바꿈 처리
- width: calc(50% – 10px)으로 간격을 고려한 정확한 너비 설정
- gap 속성으로 사진 간 여백을 손쉽게 조절
Flexbox 방식은 코드가 간결하고 유지보수가 쉬운 것이 특징입니다. 워드프레스 커스텀 HTML 블록에서 바로 사용할 수 있습니다.
워드프레스 갤러리 블록 활용하기
워드프레스를 사용한다면 별도의 코딩 없이 기본 제공되는 갤러리 블록을 활용하는 것이 가장 편리합니다. 구텐베르크 에디터에서 갤러리 블록을 추가하면 자동으로 여러 장의 사진을 격자 형태로 배열해줍니다.
- 에디터에서 블록 추가 버튼 클릭 → 갤러리 검색 후 선택
- 사진 여러 장을 한꺼번에 업로드하거나 미디어 라이브러리에서 선택
- 열 수, 이미지 크기, 캡션 표시 여부 등을 사이드바에서 손쉽게 조정
- 링크 설정을 통해 사진 클릭 시 원본 이미지 또는 첨부 페이지로 이동 가능
갤러리 블록은 반응형으로 동작하여 모바일에서도 자연스럽게 표시됩니다. 추가 플러그인 없이 사용 가능하다는 점에서 효율적인 선택입니다.
사진 배치 시 주의할 점
사진을 나란히 배치할 때는 몇 가지 사항을 주의해야 합니다. 첫째, 이미지 크기를 통일하는 것이 중요합니다. 가로세로 비율이 다른 사진들을 나란히 배치하면 레이아웃이 어긋나 보기 불편할 수 있습니다. 둘째, 파일 용량을 최적화해야 합니다. 고해상도 사진 여러 장을 한 페이지에 올리면 로딩 속도가 크게 느려집니다. 셋째, alt 텍스트를 반드시 입력해야 합니다. 검색엔진 최적화(SEO)와 웹 접근성을 위해 각 이미지에 적절한 설명을 추가하는 습관을 들이세요.
관련 글
함께 읽으면 좋은 글
- 옥수수 칼로리 높으니 계곡 물놀이 갈때 과식 금지
- 블로그를 제대로 운영해 보기 위해 필요한 마인드
- 밤에 문여는 약국 쉽게 찾는 방법 (충북)
- 애드센스 승인 후기 – 45일 제한 두 번 당한 블로그
- 3월에 심는 작물 알아본다면 이것만 보면 됩니다.
