이미지 캡션(자막) 꾸미기

블로그에 사진,  이미지를 올리면서 설명할 수 있는 짧은 글을 적어 놓으면 괜찮다는 생각이 들어 찾아 보았다.

/* width:100%; 이렇게 넓이를 주면 캡션의 위치가 사진과 다른 위치에 나타난다. */ .skin_view .area_view .imageblock { max-width:100%; height:auto; margin-top:10px; } /* Image cap1 */ .cap1 { margin:-10px 0 17px 0; padding-top:5px; font-size:14px; color: #999; text-align: center; border-bottom:1px solid #fafafa; border-radius:17px; -webkit-box-shadow:0 10px 7px -7px #f7f7f7; -moz-box-shadow:0 10px 7px -7px #f7f7f7; box-shadow:0 10px 7px -7px #f7f7f7; background-color:#fff; background-color:rgba(255,255,255,.95); transition:top 0.2s ease-in-out; } .cap1:before { display: inline-block; content: "▲"; padding-right: 5px; font-size: 13px; }

참조 : http://webdir.tistory.com/489

 

오도산 휴양림. / 폭 100%.

5월초에 갔다 온 오도산 휴양림이다. 

다시 가고 싶은 휴양림이다.

텐트를 설치할 수 있는 데크도 있는데 예약을 하기가 엄청 힘들다.  몇 번의 도전을 해 봤으나 오도산 휴양림의 홈페이지에 접속조차 되지를 않아 포기했다.

 

이순신 대교. / 가운데 정렬 모습.

 

 

여수 해양 케이블. / 사진 왼쪽 정렬 모습.

 

캡션의 모습은 '에디터 화면'에서는 안 나타나고 '미리보기 화면'에서 나타난다.

사진의 넓이가 본문의 폭보다 작을 때,  사진의 위치가 가운데일 때에 캡션의 위치를 제대로 나타나게 한다고 무~지? 고생했네.

ㅎㅎㅎ