이미지에 캡션 달기

서두

본문에서는 마크다운 문법에서 기본적으로 지원하지 않는 이미지 캡션 기능을 넣기 위한 방법을 설명하였다.

문제

기본적인 마크다운 문법에는 이미지 링크시에 캡션 기능이 없다. 단지 아래처럼 이미지가 누락된 경우 나타내는 대체문구(alt 속성)가 전부이다. HTML의 img 태그를 사용해도 마찬가지이다.

<img src="https://notfound.url/image.jpg" alt="대체문구" />

![대체문구](https://notfound.url/image.jpg)

<img src="https://vuepress.vuejs.org/hero.png" alt="외부 이미지" height="100px" />
1
2
3
4
5

이렇게 작성하면 아래처럼 나타난다.


대체문구

대체문구

외부 이미지

세번째처럼 이미지가 존재하면 대체 문구는 보이지 않게 된다.

원하는 모양

원하는 모양은 아래처럼 이미지 아래에 중앙 정렬된 텍스트가 나오는 것이다.

VuePress 이미지이렇게 설명을 넣을 수 있어야 한다

Jekyll같은 툴에는 이미 플러그인 형태로 존재하긴 하지만 VuePress에는 아직 없다. 그렇다면 과연 어떻게 해결할 수 있을까? 구글링을 해보자

힌트

그렇다. 구글링 해보면 나같은 고민을 가진 사람이 있게 마련이다. Using an image caption in Markdown Jekyll | StackOverflow 을 살펴보면 그 해법을 찾을 수가 있다.

잘 읽어보면 중간의 한 팁중에서 이미지 링크과 이탤릭체 강조 기능을 붙여 쓴다음, 실제 빌드된 결과가 img, em 태그가 연달아 나오는 형태가 되므로 CSS 선택자를 활용하자는 아이디어가 보인다.

VuePress에서도 CSS 커스터마이징이 가능하므로 (Default Theme Config # Migrate your styles to style.styl | VuePress) 적용해 보도록 하자.

해법

먼저 style.styl 파일을 생성하고, 스타일을 적용한다. 참고로 img + em 선택자는 img 태그 뒤에 연달아 em 태그가 나올 경우, em 태그를 선택하는 CSS 선택자이다.

/* docs/.vuepress/style.styl */

img + em {
  display: block;
  text-align: center;
}
1
2
3
4
5
6

style.styl은 오타가 아니다!

그리고 본문에는 이미지 링크에 바로 덧붙여서 이탤릭 강조 기능으로 캡션을 적는다.

![VuePress 이미지](https://vuepress.vuejs.org/hero.png)*이제 캡션을 달 수 있다!*

<img src="https://vuepress.vuejs.org/hero.png" alt="외부 이미지" height="100px" />*이제 캡션을 달 수 있다!*
1
2
3

자, 결과를 보자.


VuePress 이미지이제 캡션을 달 수 있다!

외부 이미지이제 캡션을 달 수 있다!

결론

생각보다 어렵지 않게 캡션 기능을 적용할 수 있었다. 기존에 작성한 글들의 이미지에도 캡션을 달아야겠다.

이정도면 매우 간단하고 훌륭한 기법이라고 생각된다. 딱히 나중에 플러그인이 나와도 바꿀 필요가 없을 정도이다. 훌륭하다!

최종 수정: 2018-12-6 04:22:34