이미지와 미디어 요소 렌더링 테스트
이 글은 블로그 본문의 이미지, figure, figcaption, 구분선 등 미디어 관련 요소가 정상적으로 렌더링되는지 확인한다.
기본 이미지
이미지는 본문 너비에 맞게 반응형으로 표시되어야 한다.
이미지 다음의 문단. 이미지와 텍스트 사이의 간격을 확인한다.
Figure + Figcaption
구분선 테스트
위 문단과 아래 문단 사이에 구분선이 들어간다.
구분선 아래의 문단. hr 태그의 두께, 색상, 여백이 적절해야 한다.
이미지와 텍스트 혼합
아래는 이미지와 텍스트가 번갈아 나오는 패턴이다. 실제 블로그에서 가장 흔한 구성이다.
첫 번째 이미지에 대한 설명 문단. 이미지 바로 아래에 설명이 오는 패턴은 가이드 형식의 글에서 자주 사용된다.
두 번째 이미지에 대한 설명 문단. figure와 figure 사이, figure와 p 사이의 간격이 일정해야 한다.