티스토리│캡션 달기 (사진 자막 달기)

티스토리 게시글 포함된 사진에 캡션(자막) 다는 법

사진의 설명이나 내용이 필요한 경우가 있다. 그럴 경우 캡션 달기를 이용하여 사진에 정보를 더 넣을 수 있다.

처음에 사진에 자막을 달았을 땐 자막이 나오지 않았다. 글쓰기 화면에서는 자막이 보이지 않는다. 그래서 각 사진에 자막이 달려 있는지 일일이 사진을 눌러보거나 미리보기를 통하여 확인 할 수가 있다.

위 사진 처럼 캡션이 달리지 않은 상태에서는 글쓰기 화면이나 게시글이 발행된 화면이나 별반 차이가 없다.

사진을 개별 클릭하며 기본설정 / 사진 에서 자막의 내용을 적어 넣을 수가 있다.

자막이 달렸을 때 미리보기 화면이다. 필자는 여기서 의문이 생겼다. 자막의 크기가 본문의 크기와 같아 줄 바꿈을 잘 하지 않으면 자막이나 본문의 가독성에 서로 방해가 될 것 같았다. 그래서 자막의 위치와 크기를 조정하는 방법을 찾아보았다.

자막의 내용에 변화를 주는 방법은 CSS를 수정하여 블로그 내 전체 게시물에 영향을 줄 수 있다.

또 다른 방법은 글쓰기 창에서 HTML 박스를 체크하여 수정하여 개별 이미지에 대해서 설정값을 조정하는 방법이 있는데 이 쪽 분야에 완전 초보자 이기 때문에 CSS를 수정하는 방향으로 진행하였다. 

CSS를 수정하는 경로는 [블로그관리 / 스킨편집 / html 편집] 탭을 클릭해서 들어갈 수 있다.

 

이동해서 들어오면 다음과 같이 화면이 오른쪽에 위치한다. 여기에서 적당한 곳에 다음 태그를 추가하면 된다.

/* image caption style 이미지 아래 캡션 스타일 */

.cap1 {font-size:12px; color:#999;  text-align:center; margin:0px 0px 0px 0px; line-height:50%;}

태그 수정 및 추가를 처음 해보게 되었는데 오타가 나거나 태그가 충분히 입력되지 않으면 붉은 색 글씨가 되는 점이 신기했다. 마치 한글에서 오타나 맞춤법이 맞지 않는 것을 체크하는 것 같았다. 필자가 입력한 태그는 1)글씨 크기를 본문보다 작게 본문에서는 글자크기 단위가 pt이고 태그에서는 px 이어서 이 부분에 대해서는 알아봐야겠다. 2)사진 중앙 하단에 자막이 위치 3)사진과 자막의 간격 좁게였다.

이렇게 수정한 결과 아래와 같은 결과를 얻을 수 있어서 뿌듯하다. 처음에는 CSS위치는 찾는 것 부터 애를 먹었다. HTML하고 비슷한 것 같은데 뭐가 어디서 어떻게 문제가 있는지 알 수가 없었고 어려운 태그들을 마주하고 있자니 머리가 텅텅 비어버리는 기분이었다. 다행이 몇몇 블로거들의 게시글을 빌어 수정할 수 있어 다행이다. 지금 이렇게 남기고 기억하지 않으면 또 잊어버릴 것 같아 블로그를 만들어 나가는데 필요한 정보와 기능, 기술들을 잘 정리해서 본인의 것으로 만들어야겠다.

[참고]

link ; WEBDIR / 파란토마토 블로그