[TEST] 제목 계층과 본문 텍스트 렌더링 테스트

제목 계층과 본문 텍스트 렌더링 테스트

이 글은 블로그 본문의 제목 태그와 텍스트 스타일이 정상적으로 렌더링되는지 확인하기 위한 테스트 콘텐츠다. 모든 태그는 고유 class나 id 없이 순수 HTML만 사용한다.

일반 문단 텍스트. 이탤릭 강조와 볼드 강조를 포함한다. 형광펜 하이라이트도 테스트한다. 링크는 블로그 목록으로 연결된다. 부가 정보는 small 태그로 표시한다.

h2 대제목 — 주요 섹션 구분

h2는 본문의 주요 섹션을 구분하는 역할을 한다. 본문 텍스트와의 크기 차이가 명확해야 하며, 위아래 여백이 충분해야 한다.

h3 중제목 — 세부 주제 분류

h3은 h2 아래의 세부 주제를 나타낸다. h2보다 작지만 본문보다는 눈에 띄어야 한다.

h4 소제목 — 세부 항목 나열

h4는 가장 작은 수준의 제목이다. 본문과 구분되지만 h3보다는 덜 강조된다.

긴 문단 테스트

블로그 본문에서 가장 많이 사용되는 것은 일반 문단이다. 문단 간 간격(margin-bottom)이 적절해야 가독성이 유지된다. 줄 간격(line-height)도 중요한 요소로, 너무 좁으면 답답하고 너무 넓으면 산만해진다. 일반적으로 1.6~1.8 정도의 line-height가 한글 본문에 적합하다. 모바일에서도 가로 폭에 맞게 줄바꿈이 자연스럽게 일어나야 한다.

두 번째 문단이다. 문단과 문단 사이의 간격이 일정해야 한다. 볼드 텍스트가 포함된 문장, 이탤릭 텍스트가 포함된 문장, 그리고 인라인 코드가 포함된 문장이 모두 자연스럽게 어우러져야 한다.

Drop Cap 테스트

첫 번째 문단의 첫 글자가 크게 표시되는 Drop Cap 스타일이 적용되어 있다면, 이 문단의 첫 글자가 크게 보여야 한다. Drop Cap은 에디토리얼 스타일의 블로그에서 자주 사용되는 기법이다.

인라인 요소 혼합 테스트

하나의 문장에 볼드, 이탤릭, 하이라이트, 코드, 링크가 모두 포함된 경우의 렌더링을 확인한다. 각 인라인 요소가 서로 충돌하지 않고 자연스럽게 표시되어야 한다.