링크 문법
링크는 Markdown에서 콘텐츠를 연결하는 중요한 요소입니다. 다양한 링크 문법을 마스터하면 문서를 더 연결되고 실용적으로 만들 수 있습니다.
기본 링크 문법
인라인 링크
[링크 텍스트](URL)
형식을 사용하여 링크를 만듭니다:
markdown
이것은 [Google](https://www.google.com)로의 링크입니다.
오픈 소스 프로젝트를 보려면 [GitHub](https://github.com)를 방문하세요.
렌더링 결과:
이것은 Google로의 링크입니다. 오픈 소스 프로젝트를 보려면 GitHub를 방문하세요.
제목이 있는 링크
URL 뒤에 제목을 추가하면 마우스 오버 시 나타납니다:
markdown
이것은 [제목이 있는 링크](https://www.example.com "이것은 링크 제목입니다")입니다.
렌더링 결과:
이것은 제목이 있는 링크입니다.
참조식 링크
기본 참조식 링크
링크 정의와 사용을 분리합니다:
markdown
이것은 [참조 링크][1]입니다.
이것은 또 다른 [참조 링크][link-name]입니다.
[1]: https://www.example.com
[link-name]: https://www.google.com "Google 검색"
렌더링 결과:
이것은 참조 링크입니다. 이것은 또 다른 참조 링크입니다.
암시적 링크 라벨
링크 텍스트 자체가 라벨로 사용됩니다:
markdown
검색하려면 [Google][]을 방문하세요.
[GitHub][]에서 프로젝트를 확인하세요.
[Google]: https://www.google.com
[GitHub]: https://github.com
렌더링 결과:
검색하려면 Google을 방문하세요. GitHub에서 프로젝트를 확인하세요.
자동 링크
URL 자동 링크
URL을 꺾쇠괄호로 감싸서 간단히 입력합니다:
markdown
<https://www.example.com>
<https://github.com/user/repo>
렌더링 결과:
https://www.example.comhttps://github.com/user/repo
이메일 자동 링크
markdown
연락처: <user@example.com>
지원: <support@company.com>
렌더링 결과:
연락처: user@example.com 지원: support@company.com
내부 링크
앵커 링크
같은 페이지의 제목으로 링크합니다:
markdown
[기본 링크 문법](#basic-link-syntax)으로 이동
[모범 사례](#best-practices) 참조
렌더링 결과:
상대 경로 링크
다른 파일로 링크합니다:
markdown
[제목 문법](headings.md) 참조
[홈](../index.md)으로 돌아가기
특수 링크
이미지 링크
이미지를 링크로 감쌉니다:
markdown
[](https://www.example.com)
다운로드 링크
파일 다운로드로 링크합니다:
markdown
[사용자 매뉴얼](files/manual.pdf) 다운로드
[샘플 코드](examples/demo.zip) 받기
링크 텍스트 형식
형식이 있는 링크 텍스트
markdown
이것은 [**굵은 링크**](https://www.example.com)입니다
이것은 [*이탤릭 링크*](https://www.example.com)입니다
이것은 [`코드 스타일 링크`](https://www.example.com)입니다
렌더링 결과:
이것은 굵은 링크입니다 이것은 이탤릭 링크입니다 이것은 코드 스타일 링크
입니다
여러 줄 링크 텍스트
markdown
이것은 [매우 긴 링크 텍스트로,
줄바꿈이 필요할 수 있습니다](https://www.example.com)
일반적인 오류와 해결책
1. 괄호 불일치
markdown
❌ 오류:
[링크 텍스트(https://www.example.com) ← 오른쪽 괄호 누락
✅ 올바른:
[링크 텍스트](https://www.example.com)
2. 공백 문제
markdown
❌ 오류:
[ 링크 텍스트 ]( https://www.example.com ) ← 불필요한 공백
✅ 올바른:
[링크 텍스트](https://www.example.com)
3. URL 인코딩
특수 문자가 있는 URL의 경우:
markdown
❌ 잠재적 문제:
[검색](https://www.google.com/search?q=markdown)
✅ 더 안전한:
[검색](https://www.google.com/search?q=markdown)
또는 참조 스타일 사용:
[검색][google-search]
[google-search]: https://www.google.com/search?q=markdown
모범 사례
1. 설명적인 링크 텍스트 사용
markdown
✅ 권장: 설명적인 텍스트
[공식 Markdown 문법 문서](https://daringfireball.net/projects/markdown/syntax) 참조
❌ 권장하지 않음: 일반적인 텍스트
문서를 보려면 [여기](https://daringfireball.net/projects/markdown/syntax)를 클릭하세요
2. 긴 문서에는 참조식 링크 사용
markdown
✅ 권장: 긴 문서에는 참조 스타일 사용
우리의 연구에서 [Smith 등][smith2020]의 작업,
[Jones의 이론][jones2019], [최신 업계 보고서][industry2021]를 참조했습니다.
[smith2020]: https://www.markdownlang.com/smith-2020-paper
[jones2019]: https://www.markdownlang.com/jones-theory
[industry2021]: https://www.markdownlang.com/industry-report-2021
3. URL을 간결하게 유지
markdown
✅ 권장: 짧은 URL 또는 사용자 정의 도메인 사용
[프로젝트 홈페이지](https://myproject.com)
✅ 허용 가능: 긴 URL에는 참조 스타일 사용
[상세 분석 보고서][detailed-report] 참조
[detailed-report]: https://company.com/reports/2023/detailed-analysis-q4-performance-metrics
링크 검증
링크 유효성 확인
문서의 링크를 정기적으로 확인하세요:
markdown
<!-- 권장: 링크 상태를 표시하는 주석 추가 -->
[활성 링크](https://www.google.com) <!-- ✓ 2023-01-15 -->
[사용 중단 링크](https://old-site.com) <!-- ⚠️ 유효하지 않을 수 있음 -->
검증 도구 사용
- linkchecker - 명령줄 링크 검사기
- markdown-link-check - Node.js 링크 검증기
- VS Code 확장 - 실시간 링크 검증
HTML 출력
Markdown 링크는 HTML로 변환됩니다:
markdown
[링크 텍스트](https://www.example.com "제목")
변환된:
html
<a href="https://www.example.com" title="제목">링크 텍스트</a>
고급 팁
1. 조건부 링크
컨텍스트에 따라 링크 추가 여부를 동적으로 결정:
markdown
개발 중에는 [로컬 서버](http://localhost:3000) 방문
프로덕션에서는 [프로덕션 서버](https://production.example.com) 방문
2. 링크 그룹화
관련 링크를 그룹으로 관리:
markdown
<!-- 공식 리소스 -->
[공식 웹사이트][official]
[공식 문서][docs]
[공식 블로그][blog]
<!-- 커뮤니티 리소스 -->
[GitHub 저장소][github]
[포럼][forum]
[커뮤니티 블로그][community]
[official]: https://www.markdownlang.com
[docs]: https://docs.example.com
[blog]: https://blog.example.com
[github]: https://github.com/example/project
[forum]: https://forum.example.com
[community]: https://community.example.com
3. 다국어 링크
markdown
문서 보기: [English](README.md) | [中文](README-zh.md) | [日本語](README-ja.md)
실제 예시
네비게이션 메뉴
markdown
## 빠른 네비게이션
**시작하기**
- [Markdown이란](what-is-markdown.md)
- [에디터 설치](install-editor.md)
- [첫 번째 문서](first-document.md)
**문법 참조**
- [기본 문법](basic-syntax.md)
- [확장 문법](extended-syntax.md)
- [모범 사례](best-practices.md)
**리소스 링크**
- [공식 웹사이트](https://daringfireball.net/projects/markdown/)
- [온라인 에디터](https://dillinger.io/)
- [문법 검사기](https://markdownlint.github.io/)
참조
markdown
## 참조
이 문서는 다음 리소스를 기반으로 합니다:
1. [공식 Markdown 문법][markdown-syntax] - John Gruber
2. [CommonMark 사양][commonmark] - Markdown 표준화
3. [GitHub Flavored Markdown][gfm] - GitHub 확장 문법
4. [Markdown 가이드][markdown-guide] - 포괄적인 학습 리소스
[markdown-syntax]: https://daringfireball.net/projects/markdown/syntax
[commonmark]: https://commonmark.org/
[gfm]: https://github.github.com/gfm/
[markdown-guide]: https://www.markdownguide.org/
권장 도구
markdown
## 권장 도구
### 에디터
- [Typora](https://typora.io/) - WYSIWYG 에디터
- [Mark Text](https://marktext.app/) - 무료 오픈 소스 에디터
- [VS Code](https://code.visualstudio.com/) + Markdown 확장
### 온라인 도구
- [Dillinger](https://dillinger.io/) - 온라인 에디터
- [StackEdit](https://stackedit.io/) - 기능이 풍부한 온라인 에디터
- [Markdown to HTML](https://markdowntohtml.com/) - 형식 변환
### 정적 사이트 생성기
- [VitePress](https://vitepress.dev/) - Vue 생태계
- [Docusaurus](https://docusaurus.io/) - React 생태계
- [GitBook](https://gitbook.com/) - 문서 플랫폼
관련 문법
연습
다음 유형의 링크를 만들어보세요:
- 여러 외부 링크가 포함된 리소스 목록
- 참조식 링크를 사용하는 기술 문서
- 내부 네비게이션이 있는 긴 문서
- 이메일과 웹사이트 링크가 있는 연락처 페이지