링크와 이미지

~12 min · markdown, links, images, accessibility

Level 0평문

0 XP0/64 lessons0/12 achievements

0/100 XP to next level100 XP to go0% complete

인라인, 참조, autolink

Markdown 링크 세 가지 스타일. 인라인 ([text](url)) 이 기본 — 짧은 문서에 적합. 참조 ([text][id] + 다른 곳에 [id]: url) 는 링크 많을 때 본문 가독성 유지. autolink (<https://example.com>) 는 raw 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">

External links

Exercise

기존 README 하나를 인라인 링크에서 참조 스타일로 바꿔봐. 본문이 사전이 아니라 문장처럼 읽히는 거 느껴봐. 어디에 어떤 스타일이 맞을지 직접 결정해.

Progress

Progress is local-only — sign in to sync across devices.

← Previous리스트 — 순서 없음, 순서 있음, 중첩, 태스크 Next →코드 — inline 과 fenced block

이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

🔔 답글 알림 (로그인 필요)

로그인 — 댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.