마크다운으로 글을 쓰다 보면 이미지 바로 뒤에 붙는 특이한 코드인 {: width="800" }을 자주 보게 됩니다. 이 코드는 단순한 글자가 아니라, 이미지의 크기를 조절하는 강력한 ‘속성 주머니’와 같습니다.
오늘은 이 코드의 문법적 정체와 작동 원리를 하나씩 파악해 보겠습니다.
🔍 코드 구조 해부: IAL(Inline Attribute List)
이 문법의 정식 명칭은 IAL(인라인 속성 리스트)입니다. Chirpy 테마가 사용하는 Kramdown 엔진에서 지원하는 특수 문법으로, 이미지나 텍스트 요소에 직접 HTML 속성을 부여할 때 사용합니다.
{: width="800" }
1. {: (속성 시작 선언)
- 의미: “지금부터 이 바로 앞에 있는 요소(이미지)에 특정한 성질(Attribute)을 추가하겠다“는 약속입니다.
- 규칙: 반드시 중괄호(
{)와 콜론(:)이 붙어 있어야 하며, 앞의 이미지 코드())와 공백 없이 붙여 써야 정확히 작동합니다.
2. width="800" (가로 크기 지정)
- 의미: 웹 브라우저에게 “이 이미지의 가로 길이를 800픽셀(px)로 고정해라”라고 내리는 명령입니다.
- 특징: 숫지만 적으면 기본적으로 픽셀 단위로 인식됩니다.
width="50%"처럼 퍼센트 단위를 사용할 수도 있습니다.
3. } (속성 종료 선언)
- 의미: “여기까지가 내가 부여할 속성의 끝이다”라고 선언하는 기호입니다.
🛠️ 실제 작동 원리: 마크다운이 HTML로 변하는 과정
여러분이 마크다운 파일에 코드를 작성하면, 블로그 엔진(Jekyll)은 이를 웹 브라우저가 이해할 수 있는 HTML 태그로 번역합니다.
[ Image of HTML attribute assignment to image element ]
- 작성한 마크다운:
{: width="800" } - 변환된 HTML:
<img src="/경로.jpg" alt="사진" width="800">
이처럼 마크다운은 복잡한 HTML 태그를 직접 쓰지 않고도, 이미지의 크기를 쉽고 직관적으로 조절할 수 있게 도와줍니다. 다음처럼::
💡 문법 사용 시 주의사항 (체크리스트)
- 공백 주의: 이미지 코드의 닫는 괄호
)와 속성 시작 기호{사이에 빈칸이 있으면 안 됩니다.- ✅
...jpg){: width="800" } - ❌
...jpg) {: width="800" }(공백이 있으면 일반 글자로 인식되어 화면에 그대로 노출됩니다.)
- ✅
비율 유지:
width만 지정하면 세로 길이는 원본 비율에 맞춰 자동으로 조절됩니다. 이미지가 찌그러지는 것을 방지하려면 가로 값만 넣는 것을 권장합니다.- 클래스 병합: 크기뿐만 아니라 스타일을 위한 클래스(예: 그림자 효과)도 함께 넣을 수 있습니다.
- 예:
{: width="800" .normal }
- 예:
🐜 한 줄 요약
”
{: width='800' }은 마크다운 이미지 바로 뒤에 찰딱 붙어서, 이미지의 크기를 내 마음대로 조절해 주는 마법의 속성 주머니입니다.”
이제 이 문법의 원리를 완벽히 이해하셨으니, 상황에 맞춰 자유자재로 이미지 크기를 조절해 보세요! 🚀