이미지 문법

이미지는 문서에서 중요한 시각적 요소입니다. Markdown은 이미지 삽입과 관리를 위한 간결한 문법을 제공합니다.

기본 이미지 문법

인라인 이미지

![대체 텍스트](이미지 URL) 형식을 사용합니다:

markdown

![Markdown 로고](https://www.markdownlang.com/markdown-logo.png)

제목이 있는 이미지

선택적 제목을 추가합니다:

markdown

![Markdown 로고](https://www.markdownlang.com/markdown-logo.png "공식 Markdown 로고")

이미지에 마우스를 올리면 제목 텍스트가 표시됩니다.

참조식 이미지

기본 참조 스타일

markdown

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

[image-ref]: https://www.markdownlang.com/image.jpg "선택적 제목"

단축 참조 스타일

참조 라벨이 대체 텍스트와 같을 때:

markdown

![Markdown 로고][]

[Markdown 로고]: https://www.markdownlang.com/markdown-logo.png

이미지 경로 유형

절대 URL

markdown

![웹 이미지](https://www.markdownlang.com/images/photo.jpg)

상대 경로

markdown

![로컬 이미지](./images/photo.jpg)
![상위 디렉토리 이미지](../images/photo.jpg)
![같은 디렉토리 이미지](photo.jpg)

루트 상대 경로

markdown

![루트 디렉토리 이미지](/images/photo.jpg)

고급 이미지 기능

이미지 링크

이미지를 링크로 감쌉니다:

markdown

[![이미지 설명](image.jpg)](https://www.markdownlang.com)

렌더링 결과: 이미지를 클릭하면 지정된 링크로 이동합니다.

HTML로 이미지 제어

크기 지정

markdown

<img src="image.jpg" alt="설명" width="300" height="200">

이미지 정렬

markdown

<!-- 가운데 정렬 -->
<div align="center">
  <img src="image.jpg" alt="가운데 정렬된 이미지" width="400">
</div>

<!-- 오른쪽 정렬 -->
<div align="right">
  <img src="image.jpg" alt="오른쪽 정렬된 이미지" width="300">
</div>

반응형 이미지

markdown

<img src="image.jpg" alt="반응형 이미지" style="max-width: 100%; height: auto;">

이미지 조합 표시

양면 표시

markdown

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

이미지 그리드

markdown

<table>
  <tr>
    <td><img src="img1.jpg" width="200"></td>
    <td><img src="img2.jpg" width="200"></td>
  </tr>
  <tr>
    <td><img src="img3.jpg" width="200"></td>
    <td><img src="img4.jpg" width="200"></td>
  </tr>
</table>

이미지와 텍스트 혼합

markdown

<img src="avatar.jpg" align="left" width="100" style="margin-right: 10px;">

이미지가 왼쪽에 떠 있는 텍스트 단락입니다. 텍스트는 이미지를 둘러싸고 혼합 레이아웃을 만듭니다. 이는 개인 프로필이나 제품 소개에 사용할 수 있습니다.

<div style="clear: both;"></div>

대체 텍스트 모범 사례

설명적인 텍스트

markdown

✅ 권장: 이미지 내용 설명
![작업 공간에서 노트북으로 작업하는 사용자](workspace.jpg)

❌ 권장하지 않음: 의미 없는 텍스트
![이미지](workspace.jpg)
![여기 클릭](workspace.jpg)

기능적 이미지

markdown

✅ 권장: 이미지 기능 설명
![검색 버튼](search-icon.png)
![GitHub 저장소 링크](github-logo.png)

❌ 권장하지 않음: 주변 텍스트 반복
![클릭](search-icon.png)을 클릭하여 검색

장식용 이미지

markdown

✅ 권장: 장식용 이미지는 빈 대체 텍스트 사용
![](decorative-border.png)

❌ 권장하지 않음: 불필요한 설명
![장식용 테두리 패턴](decorative-border.png)

일반적인 이미지 형식

웹 친화적 형식

형식	용도	특징
JPEG	사진, 복잡한 이미지	작은 파일, 손실 압축
PNG	아이콘, 투명 배경	무손실 압축, 투명도 지원
WebP	최신 웹 이미지	더 작은 크기, 더 나은 품질
SVG	벡터 그래픽, 아이콘	확장 가능, 작은 파일
GIF	간단한 애니메이션	애니메이션 지원, 제한된 색상

형식 선택 조언

markdown

✅ 권장 사용법:
![사진](photo.jpg)           ← 사진용 JPEG
![아이콘](icon.png)           ← 아이콘용 PNG
![벡터](logo.svg)             ← 벡터 그래픽용 SVG
![애니메이션](animation.gif)  ← 간단한 애니메이션용 GIF

❌ 권장하지 않음:
![아이콘](icon.jpg)           ← 아이콘에는 JPEG가 적합하지 않음
![사진](photo.png)            ← PNG 파일이 클 수 있음

이미지 최적화 팁

파일 크기 최적화

적절한 해상도 선택

markdown

<!-- 웹 표시에 권장 -->
<img src="image.jpg" width="800" alt="설명">  ← 고해상도 화면용 2배 이미지

적절한 압축 사용

markdown

<!-- JPEG 품질: 70-80% 권장 -->
![최적화된 사진](optimized-photo.jpg)

지연 로딩

markdown

<img src="image.jpg" alt="설명" loading="lazy">

CDN 및 이미지 호스팅 사용

markdown

<!-- CDN으로 가속 -->
![CDN 이미지](https://cdn.example.com/images/photo.jpg)

<!-- 이미지 호스팅 서비스 -->
![호스팅된 이미지](https://img.example.com/upload/photo.jpg)

일반적인 오류 및 해결 방법

1. 경로 오류

markdown

❌ 오류:
![이미지](images/photo.jpg)    ← 경로가 존재하지 않음

✅ 수정:
![이미지](./images/photo.jpg)  ← 파일 경로 확인
![이미지](/assets/photo.jpg)   ← 올바른 상대 경로 사용

2. 대체 텍스트 누락

markdown

❌ 오류:
![](important-chart.jpg)     ← 중요한 이미지에 설명이 없음

✅ 수정:
![2023년 매출 데이터 비교 차트](important-chart.jpg)

3. 크기 제어 문제

markdown

❌ 문제: 이미지가 너무 큼
![큰 이미지](huge-image.jpg)   ← 레이아웃 깨짐

✅ 해결:
<img src="huge-image.jpg" alt="큰 이미지" style="max-width: 100%;">

4. 이미지 링크 문제

markdown

❌ 오류:
[![이미지](image.jpg)(https://www.markdownlang.com)  ← 문법 오류

✅ 수정:
[![이미지](image.jpg)](https://www.markdownlang.com)

실용적인 시나리오

1. 기술 문서

markdown

## 설치 단계

1. 설치 프로그램 다운로드

   ![다운로드 페이지 스크린샷](download-page.png)

2. 설치 프로그램 실행

   ![설치 마법사 인터페이스](installer-wizard.png)

3. 설치 완료

   ![설치 완료 확인](installation-complete.png)

2. 제품 소개

markdown

## 제품 기능

### 현대적 UI 디자인

<div align="center">
  <img src="ui-screenshot.png" alt="제품 UI 스크린샷" width="600">
  <p><em>깔끔하고 직관적인 사용자 인터페이스</em></p>
</div>

### 다중 플랫폼 지원

<table>
  <tr>
    <td align="center">
      <img src="windows-logo.png" width="60"><br>
      <strong>Windows</strong>
    </td>
    <td align="center">
      <img src="mac-logo.png" width="60"><br>
      <strong>macOS</strong>
    </td>
    <td align="center">
      <img src="linux-logo.png" width="60"><br>
      <strong>Linux</strong>
    </td>
  </tr>
</table>

3. 개인 프로필

markdown

## 저에 대해

<img src="avatar.jpg" align="right" width="150" style="margin-left: 20px; border-radius: 50%;">

안녕하세요! 저는 최신 웹 기술에 집중하는 풀스택 개발자입니다. 5년 이상의 개발 경험이 있으며 다양한 프로그래밍 언어 및 프레임워크에 익숙합니다.

### 기술 스택

![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript&logoColor=black)
![React](https://img.shields.io/badge/React-61DAFB?logo=react&logoColor=black)
![Node.js](https://img.shields.io/badge/Node.js-339933?logo=node.js&logoColor=white)

<div style="clear: both;"></div>

4. 튜토리얼 지침

markdown

## 코드 에디터 설정

개발 환경을 구성하려면 다음 단계를 따르세요:

1. **설정 열기**

   ![VS Code 설정 항목](vscode-settings-1.png)

2. **설정 항목 검색**

   ![설정 검색](vscode-settings-2.png)

3. **설정 값 수정**

   ![설정 수정](vscode-settings-3.png)

> 💡 **팁**: 설정을 변경한 후 편집기를 다시 시작하여 설정이 적용되도록 합니다.

접근성

의미 있는 대체 텍스트 작성

markdown

✅ 권장: 상세 설명
![2023년 3분기 15% 매출 증가를 보여주는 막대 차트, 빨간색 상승 화살표 포함](revenue-chart-q3.png)

❌ 권장하지 않음: 단순 반복
![차트](revenue-chart-q3.png)

구조화된 설명 사용

markdown

![팀 그룹 사진: 앞줄 왼쪽부터 장삼, 이사, 왕오; 뒷줄 왼쪽부터 조류, 손칠, 주팔](team-photo.jpg)

HTML 출력

Markdown 이미지는 HTML로 변환됩니다:

markdown

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

변환된 것:

html

<img src="image.jpg" alt="대체 텍스트" title="이미지 제목">

참조식 이미지:

markdown

![대체 텍스트][ref]

[ref]: image.jpg "제목"

변환된 것:

html

<img src="image.jpg" alt="대체 텍스트" title="제목">

연습

다음을 만들어보세요:

여러 제품 이미지가 있는 제품 소개 페이지
단계별 스크린샷과 설명이 있는 기술 튜토리얼
멤버 아바타와 정보가 있는 팀 소개 페이지
데이터 추세를 보여주는 비교 차트

이미지 문법 ​

기본 이미지 문법 ​

인라인 이미지 ​

제목이 있는 이미지 ​

참조식 이미지 ​

기본 참조 스타일 ​

단축 참조 스타일 ​

이미지 경로 유형 ​

절대 URL ​

상대 경로 ​

루트 상대 경로 ​

고급 이미지 기능 ​

이미지 링크 ​

HTML로 이미지 제어 ​

크기 지정 ​

이미지 정렬 ​

반응형 이미지 ​

이미지 조합 표시 ​

양면 표시 ​

이미지 그리드 ​

이미지와 텍스트 혼합 ​

대체 텍스트 모범 사례 ​

설명적인 텍스트 ​

기능적 이미지 ​

장식용 이미지 ​

일반적인 이미지 형식 ​

웹 친화적 형식 ​

형식 선택 조언 ​

이미지 최적화 팁 ​

파일 크기 최적화 ​

CDN 및 이미지 호스팅 사용 ​

일반적인 오류 및 해결 방법 ​

1. 경로 오류 ​

2. 대체 텍스트 누락 ​

3. 크기 제어 문제 ​

4. 이미지 링크 문제 ​

실용적인 시나리오 ​

1. 기술 문서 ​

2. 제품 소개 ​

3. 개인 프로필 ​

4. 튜토리얼 지침 ​

접근성 ​

의미 있는 대체 텍스트 작성 ​

구조화된 설명 사용 ​

HTML 출력 ​

관련 문법 ​

연습 ​

추천 도구 ​

이미지 편집 도구 ​

이미지 최적화 도구 ​

이미지 호스팅 서비스 ​

이미지 문법

기본 이미지 문법

인라인 이미지

제목이 있는 이미지

참조식 이미지

기본 참조 스타일

단축 참조 스타일

이미지 경로 유형

절대 URL

상대 경로

루트 상대 경로

고급 이미지 기능

이미지 링크

HTML로 이미지 제어

크기 지정

이미지 정렬

반응형 이미지

이미지 조합 표시

양면 표시

이미지 그리드

이미지와 텍스트 혼합

대체 텍스트 모범 사례

설명적인 텍스트

기능적 이미지

장식용 이미지

일반적인 이미지 형식

웹 친화적 형식

형식 선택 조언

이미지 최적화 팁

파일 크기 최적화

CDN 및 이미지 호스팅 사용

일반적인 오류 및 해결 방법

1. 경로 오류

2. 대체 텍스트 누락

3. 크기 제어 문제

4. 이미지 링크 문제

실용적인 시나리오

1. 기술 문서

2. 제품 소개

3. 개인 프로필

4. 튜토리얼 지침

접근성

의미 있는 대체 텍스트 작성

구조화된 설명 사용

HTML 출력

관련 문법

연습

추천 도구

이미지 편집 도구

이미지 최적화 도구

이미지 호스팅 서비스