Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 CSS가 어려운 이유 — 프로젝트 중심 실전 CSS 강의 소개 2023-04-13
📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12
📌 [번역] CSS 코드 냄새 2013-01-01

제목을 표현하는 HTML 마크업

글에 윗부제, 아랫부제 같은 것이 들어가는 경우가 있는데 어떻게 표현하는 것이 좋을까요?

결론적으로 이렇게 사용하고 있습니다.

<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.

이렇게 하면 몇 가지 장점이 있습니다.

  1. 아이폰 읽기도구 등에서 CSS가 날아갔을 때 기호로 부제를 구분할 수 있게 됩니다.
  2. h1으로 전체 제목을 감쌌기 때문에 아이폰 읽기도구에서 제목을 제목 영역에 노출해 줍니다.
  3. 제목을 긁어서 텍스트로 붙이면 숨겨졌던 텍스트가 나옵니다.

아래는 CSS가 없을 때 마주할 수 있는 화면입니다. 아이폰의 읽기도구를 사용하면 부제의 스타일은 제목과 같게 변하지만 :, 같은 기호들이 제대로 표현됩니다.

See the Pen 부제를 표현하는 마크업 by An, Hyeong-woo (@mytory) on CodePen.

명세 – hgroup

명세는 이렇게 설명하고 있습니다.

hgroup 요소는 헤딩과 연관된 내용을 나타냅니다. 이 요소는 h1h6 요소와 부제(subheading)나 대등제목(alternative title)을 나타내는 내용이 담긴 하나 이상의 p 요소를 묶는 데 사용될 것입니다.

그러면 태그는 아래처럼 될 것입니다.

<hgroup>
 <h1>The reality dysfunction</h1>
 <p>Space is not the only void</p>
</hgroup>

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다