[LYNMP 도움말] 마크다운(Markdown) - 이미지 삽입

마크다운(Markdown)으로 이미지를 삽입하는 방법입니다.

1. 이미지 삽입 방법

LYNMP 에디터에 이미지를 삽입하는 방법은 아래와 같은 문법으로 삽입할 수 있습니다.

![대체 텍스트(alt)](이미지_소스_URL "이미지 설명(title)")

입력 예 :

![LYNMP 로고](https://i.esdrop.com/d/dLd7n17hg9.png "LYMNP 로고")

표시 예 :

1-1. “이미지_소스_URL” 만 입력

![](이미지_소스_URL)

이미지 설명(alt)과 이미지 설명(title) 부분을 입력하지 않고도 이미지를 삽입할 수 있습니다. 이렇게 입력했을 때는 <img> 태그의 속성값인 alt와 title이 입력되지 않습니다.

입력 예 :

![](https://i.esdrop.com/d/ZklKfna5T3.jpg)

HTML 소스코드 :

<figure>
    <img src="https://i.esdrop.com/d/ZklKfna5T3.jpg">
</figure>

출력 예 :

1-2. “대체 텍스트(alt)”를 입력

![대체 텍스트(alt)](이미지_소스_URL)

대체 텍스트(alt)부분을 입력하면 이미지 태그 <img>의 속성값인 alt가 입력됩니다.

입력 예 :

![하얀 강아지](https://i.esdrop.com/d/ZklKfna5T3.jpg)

HTML 소스 코드 :

<figure>
    <img src="https://i.esdrop.com/d/ZklKfna5T3.jpg" alt="하얀 강아지">
</figure>

표시 예 :

1-3. “이미지(title)”을 입력

![](이미지_소스_URL "이미지 설명(title)")

이미지 설명(title)부분을 입력하면 이미지 태그 <img>의 속성값인 title이 입력되며, LYNMP 에디터에서는 이미지 설명(title) 입력시 캡션도 같이 입력됩니다.

입력 예 :

![하얀 강아지](https://i.esdrop.com/d/ZklKfna5T3.jpg "하얀 강아지")

HTML 소스 코드 :

<figure>
    <img src="https://i.esdrop.com/d/ZklKfna5T3.jpg" title="하얀 강아지">    
    <figcaption>하얀 강아지</figcaption>
</figure>

출력 예 :

2. 이미지를 인라인으로 삽입하기

문장 바로 다음줄에 이미지를 삽입하거나, 문장 사이에 이미지를 삽입하면 인라인으로 표시됩니다. (이미지를<figure> 태그로 하나의 블록으로 표시하고 싶을 때는 2줄 이상 띄어서 문단 구분을 해야하는 점 참고해주세요.)

예를 위해, LYNMP 로고를 인라인으로 표시해보겠습니다.

입력 예 :

LYNMP 로고는 ![LYNMP 로고](https://i.esdrop.com/d/dLd7n17hg9.png#style=max-width:50px;vertical-align:middle; "LYMNP 로고") 입니다.

출력 예 :

LYNMP 로고는 입니다.

3. 참조형식으로 이미지 삽입

이미지 소스 URL 을 참조형식으로 삽입할 수 있습니다. 참조형식을 사용하면, 글 내에 이미지 소스 URL 을 한 번만 입력하고 여러번 사용할 수 있습니다.

입력 예 :

![하얀 강아지][참조이미지 1]

[참조이미지 1]: https://i.esdrop.com/d/ZklKfna5T3.jpg

출력 예 :