글에 윗부제, 아랫부제 같은 것이 들어가는 경우가 있는데 어떻게 표현하는 것이 좋을까요?
결론적으로 이렇게 사용하고 있습니다.
<h1 class="o-title">
<span class="o-title__subtitle o-title__subtitle--head">
윗부제<span class="u-hidden-visually">:</span>
</span>
<span class="o-title__title">
여기가 제목을 쓰는 영역입니다
</span>
<span class="o-title__subtitle o-title__subtitle--tail">
<span class="u-hidden-visually">—</span>
아랫부제
</span>
</h1>.u-hidden-visually는 사람 눈에는 보이지 않지만, 실제로는 노출돼 있는 텍스트입니다(display: none과는 다르다는 뜻이죠). 원래는 검색엔진에게만 필요한 정보, 시각 장애인용 스크린리더에게만 필요한 정보를 넣는 데 사용하는 접근성 클래스인데, 여기서는 제목의 CSS가 걷혔을 때 기호로 부제를 구분하기 위해 사용했습니다.
모양은 이렇습니다.
See the Pen 부제를 표현하는 마크업 by An, Hyeong-woo (@mytory) on CodePen.
이렇게 하면 몇 가지 장점이 있습니다.
- 아이폰 읽기도구 등에서 CSS가 날아갔을 때 기호로 부제를 구분할 수 있게 됩니다.
h1으로 전체 제목을 감쌌기 때문에 아이폰 읽기도구에서 제목을 제목 영역에 노출해 줍니다.- 제목을 긁어서 텍스트로 붙이면 숨겨졌던 텍스트가 나옵니다.
아래는 CSS가 없을 때 마주할 수 있는 화면입니다. 아이폰의 읽기도구를 사용하면 부제의 스타일은 제목과 같게 변하지만 :, — 같은 기호들이 제대로 표현됩니다.
See the Pen 부제를 표현하는 마크업 by An, Hyeong-woo (@mytory) on CodePen.
명세 – hgroup
명세는 이렇게 설명하고 있습니다.
hgroup요소는 헤딩과 연관된 내용을 나타냅니다. 이 요소는h1–h6요소와 부제(subheading)나 대등제목(alternative title)을 나타내는 내용이 담긴 하나 이상의p요소를 묶는 데 사용될 것입니다.
그러면 태그는 아래처럼 될 것입니다.
<hgroup>
<h1>The reality dysfunction</h1>
<p>Space is not the only void</p>
</hgroup>