구글블로그 | 이미지와 캡션 넓이 | 동일하게 초간단 조절 | CSS

캡션(caption)은 사진(이미지)의 내용을 표시하는 설명문이다. 구글 블로그에는 캡션을 이미지에 쉽게 추가하는 기능이 있어 매우 유용하다. 하지만 주로 이미지의 하단에 추가되는 캡션의 최대 넓이는 웹페이지 넓이로 설정되기 때문에 작은 이미지의 경우 시각적인 불균형으로 가독성이 낮아진다. 이미지 넓이와 일치하는 캡션을 추가하는 간단한 방법을 소개한다.

Make the image and caption the same width

캡션 추가하기

step 1
삽입한 이미지 위에 마우스 우측 버튼을 눌러 지금과 같은 상태가 되면 밑줄이 있는 A 아이콘을 누른다.

step 2
설명 추가 부분을 눌러  커서를 옮긴다.

step 3
사진의 내용과 부합하는 설명(캡션)을 추가 한다.

캡션 수정하기

캡션을 추가하면 자동으로 ‘table’ 태그(게시글 하단 ‘table 태그’ 참조)가 만들어진다. 블로그 ‘html 작성 페이지’에 보면 table 태그를 확인할 수 있다. table 태그나 페이지 하단(권장)에 아래와 같이 스타일을 지정하면 된다.

게시글 하단

<td class="tr-caption"></td>

<style> 
.tr-caption{
   width:0;
   min-width:90%;
   font-size:17px !important;
   text-align:left !important;
   display:block;/*반드시*/
   margin-left:auto;/*자동 좌우 정렬*/
   margin-right:auto;
}
</style>

html 태그

<td style="display:block;width:0;min-width:90%;font-size:17px !important;text-align:left !important;margin-left:auto;margin-right:auto;"></td>

캡션(이미지 설명)을 조절하지 않으면 이미지 폭보다 설명문이 넓어 보기도 좋지 않을 뿐만 아니라, 보기가 불편하여 가독성이 떨어진다.

그러나 간단하게 캡션(이미지 설명)을 조절하면 이미지 넓이와 설명문의 문단 넓이가 같아져 보기가 좋아 가독성이 매우 높아진다.
방법은 캡션 태그(tr-caption)에 width:0;와 min-width:100%; 그리고 반드시 display:block; 속성을 추가하면 지금처럼 나타낼 수 있다.

이미지를 가로로 여러 개 배열하면 화면 공간을 효과적으로 활용할 때 캡션을 활용하면 대단히 유용하다. 방법은 다음 이미지(수박)의 캡션을 참고하면 된다.

가로로 배열할 각각의 이미지(table)를 포함하는 <div>를 만들고 display:flex; 속성을 추가하면 된다. table 넓이(width) 속성을 반드시 50% 이하로 설정해야 한다.

이미지를 가로로 배열하면 스마트폰 화면에서는 불편할 수 있다. 이는 모바일 용 스타일(CSS)에서 table 태그의 넓이(width)를 100%로 설정하면 된다.

모바일 스타일 지정방법

table 태그

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="float:none;margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><img alt="" border="0" data-original-height="388" data-original-width="448" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO5wJCnjKhnd2CGrBFLWU470MRFiGVDrzfmN5MipIlwtHPbMZkInpQsR1SpUyXChURaSnpRKxmnAVWz4L2T7q1bCTTFUbrAX90kyaieCjnmHeB50zswyvGzto7IB9jgaR_uziykNnC6Zb2JuZKi4STnP-1gTadUhtJXRuvjJH_gUZ9Zry5eMLVJgQn/s300/plum.webp" style="margin-left: auto; margin-right: auto;" width="600" /></td></tr><tr><td class="tr-caption" style="text-align: center;">복숭아는 안토시아닌이 풍부한 과일이다.</td></tr></tbody></table><div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO5wJCnjKhnd2CGrBFLWU470MRFiGVDrzfmN5MipIlwtHPbMZkInpQsR1SpUyXChURaSnpRKxmnAVWz4L2T7q1bCTTFUbrAX90kyaieCjnmHeB50zswyvGzto7IB9jgaR_uziykNnC6Zb2JuZKi4STnP-1gTadUhtJXRuvjJH_gUZ9Zry5eMLVJgQn/s448/plum.webp" style="display: block; padding: 1em 0px; text-align: center;"> </a></div>

의 관련글