Chirpy 블로그 이미지 크기 조절 및 캡션 넣는 방법

블로그 글을 쓰다 보면 본문에 들어가는 이미지의 크기가 너무 크거나 작아서 가독성이 떨어질 때가 있습니다.
Chirpy 테마(Kramdown)에서는 마크다운 문법 뒤에 간단한 속성을 추가하는 것만으로 이미지 크기를 자유롭게 조절하고, 멋진 캡션(설명)도 달 수 있습니다.

오늘은 본문 중간에 이미지를 800x450 크기로 지정하는 방법과 함께, 알아두면 좋은 규칙들을 정리해 보겠습니다.

---

🖼️ 특정 크기로 이미지 넣기 (800x450)

본문 중간에 이미지를 넣으면서 가로 800px, 세로 450px로 지정하고 싶다면 아래 코드를 그대로 복사해서 사용하세요.

{: width="800" height="450" }

---

🔍 코드 구성 설명

위 코드는 크게 세 부분으로 나뉩니다. 각 요소의 역할을 이해하면 응용이 쉬워집니다.

1. ![이미지 설명]
   • 이미지가 로딩되지 않을 때 나타나는 대체 텍스트(alt) 입니다.
   • 검색 엔진 최적화(SEO)를 위해 짧고 명확하게 적어주는 것이 좋습니다.
2. (/assets/posts/chirpy-image-path-guide/cover.jpg)
   • 이미지가 저장된 실제 경로입니다.
   • 앞에 / 를 꼭 붙여서 루트 기준 절대 경로로 설정해야 어느 페이지에서든 이미지가 깨지지 않고 잘 표시됩니다.
3. {: width="800" height="450" }
   • 핵심 부분입니다. Chirpy 테마가 사용하는 Kramdown 속성 부여 문법입니다.
   • 이미지 경로 괄호 () 바로 뒤에 공백 없이 붙여 써야 정상적으로 작동합니다.

---

💡 팁: 비율 유지를 원한다면?

가로와 세로 크기를 모두 지정하면 원본 비율과 달라질 경우 이미지가 왜곡되어 보일 수 있습니다.
가로 크기만 800px로 맞추고, 세로는 원본 비율에 따라 자동 조절되게 하고 싶다면 height 속성을 빼고 아래처럼 사용하세요.

{: width="800" }

---

🎨 캡션(설명)까지 함께 넣기

이미지 아래에 작게 설명(캡션)을 달아주면 독자가 내용을 훨씬 더 쉽게 이해할 수 있습니다.
Chirpy 테마에서는 아래와 같은 패턴이 잘 어울립니다.

{: width="800" height="450" .normal }
_이미지 크기 조절 및 캡션 적용 예시_

• .normal : 이미지의 그림자 효과나 테두리 스타일을 조절하는 CSS 클래스입니다.
• _텍스트_ : 이미지 바로 아래 줄에 이탤릭체 문법을 쓰면, Chirpy 테마가 이를 캡션처럼 보여 주기 때문에 한눈에 맥락이 들어옵니다.

---

이제 이 문법을 활용해 여러분의 블로그 이미지를 더 보기 좋게 꾸며 보세요! 🐜✨