링크와 이미지

인라인, 참조, autolink

Markdown 링크에는 세 가지 스타일이 있어. 인라인 ([text](url)) 이 기본이고 짧은 문서에 잘 맞아. 참조 ([text][id] 를 쓰고 [id]: url 은 딴 데 몰아두는 방식) 는 링크가 많을 때 본문을 읽을 만하게 지켜줘. autolink (<https://example.com>) 는 맨 URL 을 그냥 감싸는 거고.

이미지는 같은 문법에 ! 만 추가

![alt text](url) 처럼 쓰면 돼. alt 텍스트는 넣어도 그만 말아도 그만인 게 아니야. 스크린 리더가 그걸 읽고, 이미지가 안 뜰 때 대신 그게 보여. alt 를 아예 비워두면 (![](url)) '이건 장식이다' 라고 못 박는 뜻이 돼.

크기 조절은 HTML 필요

CommonMark 에는 이미지 크기를 정하는 문법이 없어. 크기를 잡아야 하면 <img> 태그를 직접 쓰고 width, height, style 을 붙여. Markdown 렌더러는 대부분 inline HTML 을 그대로 통과시켜 줘.

접근성 원칙: alt 텍스트는 그 이미지가 이 맥락에서 무슨 일을 하는지 를 적는 거야. 생김새를 적는 게 아니고. 문서 맨 위 로고면 alt='Acme Corp logo' 지, 'Three blue triangles' 가 아니야.

Code

인라인 링크·markdown

[Link text](https://example.com)
[With title](https://example.com "Hover title")

참조 스타일 (본문 가독성)·markdown

Read the [CommonMark spec][cm] for details.
Also see [GFM][].

[cm]: https://commonmark.org "CommonMark"
[GFM]: https://github.github.com/gfm/

Autolink·markdown

<https://example.com>
<user@example.com>

이미지 + 크기 fallback·markdown

![Alt text](https://example.com/image.png)
![Logo](./logo.png "Optional title")

<!-- 너비 필요? HTML 로 떨어져: -->
<img src="photo.png" alt="Description" width="400">

인라인, 참조, autolink

이미지는 같은 문법에 ! 만 추가

크기 조절은 HTML 필요

Code

External links

Exercise

Progress

댓글 0