마크다운 이미지

이미지는 콘텐츠를 더욱 매력적으로 만들고 요점을 설명하는 데 도움이 됩니다. 마크다운은 이미지를 추가하는 간단한 문법을 제공하지만, 고급 기능을 위해서는 때때로 HTML이 필요할 수 있습니다.

기본 이미지 문법

마크다운에서 이미지의 기본 문법은 링크와 비슷하지만 앞에 느낌표가 붙습니다: 

![대체 텍스트](image-url.jpg)
![로컬 이미지](./images/photo.jpg)
![외부 이미지](https://example.com/image.jpg)

제목이 있는 이미지

사용자가 이미지 위에 마우스를 올렸을 때 나타나는 제목을 추가할 수 있습니다: 

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

대체 텍스트 모범 사례

대체 텍스트는 접근성과 SEO에 중요합니다:

1. 설명적이어야 합니다

❌ 도움이 되지 않음: 

![이미지](photo.jpg)
![사진](pic.png)

✅ 설명적: 

![커피숍에서 노트북으로 코딩하는 여성](coding-coffee.jpg)
![2020년부터 2024년까지 판매 증가를 보여주는 막대 그래프](sales-chart.png)

2. 간결하게 유지

❌ 너무 길어요: 

![현대적인 사무실 환경에서 흰 벽과 큰 창문이 있는 컴퓨터 앞에 앉아 있는 사람의 정말 긴 설명](office.jpg)

✅ 간결함: 

![현대적인 사무실에서 컴퓨터로 작업하는 사람](office.jpg)

3. "Image of"나 "Picture of" 포함하지 않기

❌ 중복: 

![공원에서 놀고 있는 개의 이미지](dog.jpg)

✅ 직접적: 

![공원에서 놀고 있는 개](dog.jpg)

참조 스타일 이미지

링크와 마찬가지로 이미지에도 참조 스타일 문법을 사용할 수 있습니다: 

![대체 텍스트][image-reference]  

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

예시

여기 우리 로고입니다: ![회사 로고][logo]

그리고 여기 스크린샷입니다: ![앱 스크린샷][screenshot]

[logo]: /images/logo.png "우리 회사 로고"
[screenshot]: /images/app.png "앱 대시보드 스크린샷"

이미지 경로와 URL

로컬 이미지

![로컬 이미지](./images/photo.jpg)
![상대 경로](../assets/icon.png)
![절대 경로](/public/images/banner.jpg)

외부 이미지

![외부 이미지](https://example.com/image.jpg)
![Unsplash 사진](https://images.unsplash.com/photo-123/photo.jpg)

일반적인 패턴

캡션이 있는 이미지

![회의실에서 팀 미팅](meeting.jpg)
*그림 1: 프로젝트 마일스톤을 논의하는 주간 팀 미팅*

이전/이후 이미지

## 이전
![이전 웹사이트 디자인](old-design.png)

## 이후
![새로운 웹사이트 디자인](new-design.png)

단계별 지침

1. 설정 아이콘을 클릭하세요
   ![오른쪽 상단의 설정 아이콘](settings-icon.png)

2. "계정 설정"을 선택하세요
   ![계정 설정 메뉴 옵션](account-menu.png)

3. 프로필 정보를 업데이트하세요
   ![편집 가능한 필드가 있는 프로필 폼](profile-form.png)

이미지 갤러리

## 프로젝트 스크린샷

![홈페이지](homepage.png) ![대시보드](dashboard.png) ![설정](settings.png)

이미지 문제 해결

일반적인 문제

  1. 이미지가 표시되지 않음: 파일 경로와 파일명 확인

  2. 깨진 이미지 아이콘: 이미지 URL에 접근 가능한지 확인
  3. 이미지가 너무 큼: 이미지 크기 조정 또는 압축
  4. 잘못된 형식: 브라우저에서 이미지 형식을 지원하는지 확인

이미지 테스트

  • •
    마크다운 에디터에서 미리보기

  • •
    다른 브라우저에서 확인
  • •
    모바일 디바이스에서 검증
  • •
    느린 인터넷 연결에서 테스트

고급 기법

이미지 링크

이미지와 링크를 결합: 

[![확대하려면 클릭](thumbnail.jpg)](full-size.jpg)

이미지는 마크다운 문서를 향상시키는 강력한 방법입니다. 콘텐츠를 뒷받침하고 사용자 경험을 개선하는 데 신중하게 사용하세요!

콘텐츠에서 텍스트를 강조해야 하나요? 다음으로 취소선 서식에 대해 배워보세요.