링크 및 이미지 치트시트

링크 문법

인라인 링크

[링크 텍스트](https://www.markdownlang.com)
[제목이 있는 링크](https://www.markdownlang.com "링크 제목")

참조 링크

[링크 텍스트][ref]
[링크 텍스트][]

[ref]: https://www.markdownlang.com "선택적 제목"
[링크 텍스트]: https://www.markdownlang.com

자동 링크

<https://www.markdownlang.com>
<email@example.com>

앵커 링크

[제목으로 이동](#제목-이름)
[맨 위로](#top)

이미지 문법

인라인 이미지

![대체 텍스트](image.jpg)
![대체 텍스트](image.jpg "이미지 제목")

참조 이미지

![대체 텍스트][img-ref]

[img-ref]: image.jpg "선택적 제목"

이미지 링크

[![대체 텍스트](image.jpg)](https://www.markdownlang.com)

크기 지정

<img src="image.jpg" alt="대체 텍스트" width="300" height="200">

일반적인 조합

링크된 이미지

[![프로젝트 로고](logo.png)](https://github.com/user/repo)

가운데 정렬된 이미지

<div align="center">
  <img src="image.jpg" alt="설명">
</div>

나란히 배치된 이미지

<img src="img1.jpg" width="48%"> <img src="img2.jpg" width="48%">

모범 사례

유형	제안	예시
링크 텍스트	설명적인 텍스트 사용	✅ [사용자 가이드]()
링크 텍스트	"여기 클릭" 피하기	❌ [여기 클릭]()
이미지 파일	상대 경로 사용	✅ ./images/pic.jpg
대체 텍스트	이미지 내용 설명	✅ ![UI 스크린샷]()
파일 형식	웹 친화적 형식	✅ JPG, PNG, WebP

HTML 출력

Markdown	HTML
[텍스트](url)	<a href="url">텍스트</a>
	<img src="img" alt="대체">
<url>	<a href="url">url</a>

일반적인 실수

❌ 잘못된 예시:
[링크(https://www.markdownlang.com)     ← 오른쪽 괄호 누락
![이미지](image.jpg             ← 오른쪽 괄호 누락
[ 링크 ]( https://www.markdownlang.com ) ← 불필요한 공백

✅ 올바른 예시:
[링크](https://www.markdownlang.com)
![이미지](image.jpg)
[링크](https://www.markdownlang.com)