이미지 & 레이아웃
이미지 정렬, 커버, 파트 페이지 — 전자책의 시각적 요소를 다루는 CSS
커버 이미지
✓ ✓ ✓ ⭐
커버 이미지
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓ ⭐ 추천
CSS
/* 커버 전용 body — padding 제거 */
body { margin: 0; padding: 0; }
/* class="cover-image" 지정 필요 */
.cover-image {
text-align: center; /* 가운데 정렬 */
padding: 0;
margin: 0;
}
.cover-image img {
max-width: 100%; /* 화면 너비에 맞춤 */
height: auto; /* 비율 유지 */
}HTML
<div class="cover-image">
<img src="../Images/cover.jpg" alt="표지" />
</div>text-align: center — 이미지를 가운데 정렬합니다. img 태그를 감싸는 div에 적용합니다.
max-width: 100% — 이미지가 화면보다 크면 자동으로 줄어듭니다.
height: auto — 가로/세로 비율을 유지합니다.
💡 시길 팁커버 이미지는 별도 XHTML 파일(cover.xhtml)로 만들고, body에 margin:0; padding:0을 추가하세요.
⚠️ 뷰어 참고커버 이미지 권장 크기: 가로 1400px 이상, 비율 3:4. 교보/리디 모두 표지를 자동 추출합니다.