[Git Blog] 마크다운으로 이미지 캡션 추가하기

이미지 캡션

이미지 아래 회색 글씨
캡션이란 위와 같이 이미지 아래 작은 글씨로 이미지에 대한 설명 글을 뜻한다. 한 문장으로 이미지에 대한 설명을 간략히 보여주기에 글을 이해하는데 도움을 주는 기능이다.

---

Markdown 이미지

![이름](링크)

minimal-mistake 블로그 글을 쓸 때 이미지 표시를 주로 마크다운 기능을 이용해서 작성하는데 아쉽게도 마크다운에선 캡션 기능을 지원하고 있지 않다.

css를 이용하면 구현이 되지만 html태그를 작성해야 하기에 어떻게든 마크다운 만으로 캡션기능을 넣고 싶어 이것 저것 찾아봤다.

---

Markdown 이미지 캡션 사용법

![이름](링크)*캡션내용*

em 태그가 만들어진다
html태그를 쓰지 않으면서 마크다운 만으로 캡션을 넣는 방법이 있다. 마크다운 이미지 링크 바로 뒤에 Italics글씨체로 바꿔주는 ** 문법을 넣는다.

해당 문법은 블로그 페이지가 생성될 시 em태그로 변환되어 지는데 css에서 em태그 속성을 변경하는 방식으로 캡션 기능을 만든다.

---

CSS 추가

img + em {
    display: block;
    text-align: center;
    text-emphasis: 0;
  }

_sass/_page.scss로가서 위 소스를 추가해주면 된다.
이는 img 뒤에 올 em태그의 속성을 변경하는 css로 캡션과 같이 이미지 아래에 글씨가 오게 설정한다.

해당 소스를 그대로 사용하면 em태그로 인해 글씨체가 기울어져 있을 것이다. 일반 글씨체로 바꾸고 싶고 작게 보이게 하고 싶다면 아래 내용을 추가한다.

img + em {
    display: block;
    text-align: center;
    text-emphasis: 0;
    font-size: 0.8em; //글씨 크기를 줄인다
    font-style: normal; //Italics글씨체가 아닌 일반 글씨체
    color: rgba($text-color, 0.75); //폰트색의 투명도를 낮춘다
  }

---

https://62che.com/blog/vuepress/%EC%9D%B4%EB%AF%B8%EC%A7%80%EC%97%90-%EC%BA%A1%EC%85%98-%EB%8B%AC%EA%B8%B0.html#%E1%84%8B%E1%85%AF%E1%86%AB%E1%84%92%E1%85%A1%E1%84%82%E1%85%B3%E1%86%AB-%E1%84%86%E1%85%A9%E1%84%8B%E1%85%A3%E1%86%BC https://yoophi.github.io/logs/vuepress/image-caption.html https://stackoverflow.com/questions/19331362/using-an-image-caption-in-markdown-jekyll