이 글에서는 테마가 지원하는 재사용 가능한 이미지 레이아웃 클래스를 소개합니다.
나란히 배치한 쌍
코드 보기
<div class="media-pair">
<img src="image-url" alt="img 01">
<img src="image-url" alt="img 02">
</div>높이를 고정한 세로 이미지 행
media-portrait-h-220 / 240 / 280 / 360 / 480 으로 표시 높이를 맞출 수 있습니다. 이미지는 비율을 유지하며 축소되어 잘림이나 페이지 넘김이 발생하지 않습니다.
코드 보기
<div class="media-portrait-row media-portrait-h-240">
<img src="image-url" alt="img 01">
<img src="image-url" alt="img 02">
</div>적응형 그리드
코드 보기
<div class="media-grid cols-3 masonry-js">
<img src="image-url" alt="img 01">
<img src="image-url" alt="img 02">
<img src="image-url" alt="img 03">
</div>너비를 지정한 단일 이미지
media-w-100 / 95 / 90 … 를 5% 단위로 지정합니다.
이미지 왼쪽, 텍스트 오른쪽
이미지 옆에 짧은 캡션, 메모 또는 단계를 배치할 수 있습니다.
"핵심 이미지 1장 + 단락 1개" 레이아웃에 잘 어울립니다.
이미지 오른쪽, 텍스트 왼쪽
reverse 를 추가하면 순서가 뒤바뀝니다. 모바일에서는 단일 컬럼으로 접힙니다.
캐러셀 (라이트박스 포함)
갤러리 라이트박스
메인 이미지를 가운데에 배치하고 그 아래에 썸네일 줄을 표시합니다. 썸네일이나 화살표를 클릭해 이동하고, 메인 이미지를 클릭하면 전체 화면으로 표시됩니다.