# 이미지에 캡션 달기
# 서두
본문에서는 마크다운 문법에서 기본적으로 지원하지 않는 이미지 캡션 기능을 넣기 위한 방법을 설명하였다.
# 문제
기본적인 마크다운 문법에는 이미지 링크시에 캡션 기능이 없다.
단지 아래처럼 이미지가 누락된 경우 나타내는 대체문구(alt 속성)가 전부이다.
HTML의 img 태그를 사용해도 마찬가지이다.
<img src="https://notfound.url/image.jpg" alt="대체문구" />
<img src="https://vuepress.vuejs.org/hero.png" alt="외부 이미지" height="100px" />
2
3
4
5
이렇게 작성하면 아래처럼 나타난다.
세번째처럼 이미지가 존재하면 대체 문구는 보이지 않게 된다.
# 원하는 모양
원하는 모양은 아래처럼 이미지 아래에 중앙 정렬된 텍스트가 나오는 것이다.
이렇게 설명을 넣을 수 있어야 한다
Jekyll같은 툴에는 이미 플러그인 형태로 존재하긴 하지만 VuePress에는 아직 없다. 그렇다면 과연 어떻게 해결할 수 있을까? 구글링을 해보자
# 힌트
그렇다. 구글링 해보면 나같은 고민을 가진 사람이 있게 마련이다. Using an image caption in Markdown Jekyll | StackOverflow (opens new window) 을 살펴보면 그 해법을 찾을 수가 있다.
잘 읽어보면 중간의 한 팁중에서 이미지 링크과 이탤릭체 강조 기능을 붙여 쓴다음,
실제 빌드된 결과가 img, em 태그가 연달아 나오는 형태가 되므로 CSS 선택자를 활용하자는 아이디어가 보인다.
VuePress에서도 CSS 커스터마이징이 가능하므로 (Default Theme Config # Migrate your styles to style.styl | VuePress (opens new window)) 적용해 보도록 하자.
# 해법
먼저 style.styl 파일을 생성하고, 스타일을 적용한다.
참고로 img + em 선택자는 img 태그 뒤에 연달아 em 태그가 나올 경우, em 태그를 선택하는 CSS 선택자이다.
/* docs/.vuepress/style.styl */
img + em {
display: block;
text-align: center;
}
2
3
4
5
6
팁
style.styl은 오타가 아니다!
그리고 본문에는 이미지 링크에 바로 덧붙여서 이탤릭 강조 기능으로 캡션을 적는다.
*이제 캡션을 달 수 있다!*
<img src="https://vuepress.vuejs.org/hero.png" alt="외부 이미지" height="100px" />*이제 캡션을 달 수 있다!*
2
3
자, 결과를 보자.
이제 캡션을 달 수 있다!
이제 캡션을 달 수 있다!
# 결론
생각보다 어렵지 않게 캡션 기능을 적용할 수 있었다. 기존에 작성한 글들의 이미지에도 캡션을 달아야겠다.
이정도면 매우 간단하고 훌륭한 기법이라고 생각된다. 딱히 나중에 플러그인이 나와도 바꿀 필요가 없을 정도이다. 훌륭하다!