[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
출력 예 :
독자 의견
저자 @LYNMP 에게 의견 남기기: