블로그에 이미지 넣는 방법

2024년 11월 25일

블로그 글을 작성할 때 이미지를 첨부하는 방법을 알아봅시다.

이미지 저장 경로

이미지는 다음 경로에 저장합니다:

src/assets/images/posts/   ← 포스트용 이미지

방법 1: 로컬 이미지 사용

src/assets/images/posts/ 폴더에 이미지를 넣고 마크다운에서 참조합니다.

![이미지 설명](../../assets/images/posts/your-image.jpg)

예시: 로컬 이미지

아래는 프로젝트에 포함된 샘플 이미지입니다:

방법 2: 외부 URL 사용

외부 이미지 호스팅 서비스의 URL을 직접 사용할 수도 있습니다.

![이미지 설명](https://example.com/your-image.jpg)

방법 3: 클릭 가능한 이미지 (링크)

이미지를 클릭하면 다른 페이지로 이동하게 만들 수 있습니다.

[![이미지 설명](이미지URL)](링크URL)

예시

[![GitHub 저장소](https://github.html.zone/user/repo)](https://github.com/user/repo)

이미지 최적화 팁

권장 포맷

• 사진: .jpg 또는 .webp
• 스크린샷/다이어그램: .png
• 아이콘/로고: .svg

파일 크기

• 웹용 이미지는 200KB 이하 권장
• 큰 이미지는 압축 후 업로드

파일명 규칙

• 영문 소문자와 하이픈 사용
• 예: my-screenshot-01.png

마무리

이미지를 적절히 활용하면 글의 가독성과 이해도를 높일 수 있습니다. 필요한 이미지는 src/assets/images/posts/ 폴더에 저장하고 상대 경로로 참조하세요.