꿀팁: 이미지 캡션 HTML

이 새로 개선된 미디어 기능이 실제로 어떤 의미가 있는지 알아보겠습니다.

반가운 소식이 있군요! 이 기능을 구현하려고 플러그인을 쓸 필요조차 없습니다. 워드프레스에서 최근에 3.4.x 버전을 출시하면서 이 기능을 소개했으니까요.

다른 변경 사항도 Codex에서 읽어보세요.

이미지를 워드프레스 페이지나 포스트에 삽입할 때 캡션을 넣을 수 있습니다. 삽입된 이미지마다 캡션이 있을 수 있고 캡션 서식을 제작하는 데 일반 HTML 태그를 적용할 수 있습니다(물론 캡션을 넣을 자리를 비워두면 캡션이 안 보이겠지요).

댓글에서 사용 가능한 태그를 기본적으로 캡션에서 사용할 수 있습니다.

가령, <strong>로 서체를 굵게 하고 <em>으로 서체를 기울이며 <strike>로 취소선을 적용하면 됩니다.

워드프레스에서 기본적으로 배경색은 밝은 회색이고, 텍스트 색상은 어두운 회색이라는 것을 알아두세요. 이에 관한 CSS 클래스 선택자는 .wp-caption과 .wp-caption-text입니다. 

만일 여러분이 커스텀 스타일을 쓰고 싶다면, 테마 CSS에 (보통 style.css에)  적으세요.

이 글의 경우, 테마 스타일은 다음과 같습니다.

1

2

.wp-caption {

3

  background: #F1F1F1;

4

	line-height: 18px;

5

	margin-bottom: 20px;

6

	padding: 4px;

7

	text-align: center;

8

}

9

10

.wp-caption-text {

11

	color: #888;

12

	font-size: 12px;

13

	margin: 5px;

14

}

포스트 에디터에서 그림을 클릭하고 이미지 편집(Edit image)를 클릭하면 캡션 내용을 언제든지 변경할 수 있다는 것을 기억하세요.

제가 여기서 사용한 HTML 코드가 아래에 있습니다.

1

2

<em>This text is italicized.</em> <strong>And this is bold.</strong>

사진 예제

워드프레스 관리자에서 이미지 박스 삽입하기

편집기에서 보는 캡션

사이트에서 보는 캡션