# 이미지에 캡션 달기

# 서두

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

# 문제

기본적인 마크다운 문법에는 이미지 링크시에 캡션 기능이 없다. 단지 아래처럼 이미지가 누락된 경우 나타내는 대체문구(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 1:22:34 ├F10: PM┤