이미지에 캡션 달기

오랜만에 글을 올리네요.

4월 28일에 글을 올리고 거의 한달만입니다. 강의도 있고, 긴급히 제작해야 하는 전자책도 생기고 해서 정신이 없었어요.

오늘은 이미지에 캡션 다는 스타일을 알려드리려고 해요.

CSS가 익숙한 분들이야 별거 아니겠지만, 이미지 캡션이 처음인 분들은 막막할거예요.

방명록에 캡션을 달았는데 몇가지 문제가 생긴다고 해결 방법을 묻는 글이 올라와서 한번 정리해 보겠습니다.

이미지에 캡션이 달린 책을 몇권 봤는데 많은 분들이 사용하는 방식은 이런거였습니다.

<div class="img_style"><img.....></div>

<p class="img_caption"> 캡션 내용</p>

<p>본문</p>

가장 간단한 방법이긴 한데, 이미지와 캡션 한 묶음으로 움직이지 않아요. 그리고 float : left; float:right;를 했을 때 제대로 적용되지 않고요. 캡션 내용이 엄청나게 많아져도 문제가 됩니다. 문의 주신 분은 이 부분의 문제를 해결하지 못하셨던 것 같아요.

제가 쓰는 캡션 스타일은 이렇습니다. 샘플파일 다운로드 하면 뷰어에서 확인이 가능해요.

sample.epub

img {

width : 100%;

}

.img_caption {

font-size : 0.7em;

text-align : justify;

display : block;

margin : 0 0.5em 0 0.5em;

}

.img_center {

width : 100%;

text-align : center;

text-indent : 0;

}

.img_left {

float : left;

text-indent : 0;

text-align : left;

margin : 1em;

padding-right : 1em;

width : 45%;

}

.img_right {

float : right;

text-indent : 0;

text-align : right;

margin : 1em;

padding-left : 1em;

width : 45%;

}

<p class="img_right"><img alt="img007" src="../Images/img007.png"/><span class="img_caption">앨리스는 이내 토끼가 부채와 하얀 양가죽 장갑을 찾고 있다는 걸 알아챘다. </span></p>

/*p태그 대신 div 태그를 사용해도 됩니다.*/

줄간격, 여백, 글자색 등 스타일은 편집자가 원하는 대로 수정이 가능하니 책에 맞게 수정해서 사용하세요.

캡션을 넣을 때 이미지가 들어가는 상자를 하나 만들고 그 안에 이미지와 캡션을 같이 넣어 이미지와 캡션이 항상 한 묶음으로 움직이도록 만들어 놨습니다. 그래서 캡션 내용이 길어 다음 페이지로 넘어가더라도 캡션이 본문과 섞이지 않고 이미지 상자 안에 남아있게 됩니다.

샘플파일을 뷰어에서 보면 이렇게 나옵니다.

문의 주신 분의 설명 내용을 구현해 보려고 캡션을 과장되게 넣어봤습니다.

샘플은 [심야책방 세계문학 시리즈 '이상한 나라의 앨리스']에서 텍스트를 일부 발췌해 사용했습니다.

이 스타일이 실제 적용된 책입니다.

[시대의창 : 서울, 도시의 품격]

[시대의창 : 권력에 맞선 상상력 - 문화운동 연대기]