Kudos
Collect
Twiiter
Facebook
Share
Developers Bloground 👩‍💻👨‍💻

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

마지막 업데이트 4년 전
0 0 0 0

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

1. 이미지 삽입 방법

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


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

입력 예 :


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

표시 예 :

LYNMP 로고
LYMNP 로고

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

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

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

입력 예 :


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

HTML 소스코드 :

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

출력 예 :

ZklKfna5T3.jpg

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 로고는 LYNMP 로고 입니다.

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

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

입력 예 :


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

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

출력 예 :

하얀 강아지
관련글
Essedrop - 이미지 주소를 만드는 가장 빠른 방법
 

독자 의견

저자 @LYNMP 에게 의견 남기기:

Please sign in to comment.
Markdown is also available in comment.