body영역의 시맨틱요소를 사용한 마크업

1. 시맨틱 마크업

logo 영역 디자인

  <header>
    <h1 >
      <a href="https://www.coupang.com/">
        <img src="./assets/logo/logo.png" alt="COUPANG" />
      </a>
    </h1>
  </header>

• header, h1태그를 이용해 시맨틱 요소를 사용해 마크업을 할 수 있습니다.
  • HeadingsMAP을 이용하면 시멘틱 요소로 마크업한 경우 어떻게 웹 구조가 잡히는지를 확인할 수 있습니다.
  • hedaing level의 경우 책의 목차와도 같습니다. 다양한 보조기기들이 heading level만을 읽어들여서 전체 내용을 탐색할 수 있기 때문에 각각의 컨텐츠블록마다 고유의 제목을 부여하는 것이 중요합니다.
• img태그를 사용하는 경우 alt속성은 필수입니다.
  • 크롬 브라우저의 web developer라는 확장 기능의 Replace Images with Alt Attributes 을 이용해 확인을 해보면 이미지를 볼 수 없는 경우 대체텍스트가 대신 나타나는 것을 확인할 수 있습니다.

section영역 디자인

  <section class="discovery">
    <div class="discovery__headline">
      <h2 class="discovery__title">오늘의 발견</h2>
      <span class="divider">|</span>
      <p class="discovery__subtitle">오늘 쿠팡이 엄선한 가장 핫한 제품</p>
    </div>
    <ul class="discovery__list">
      <li class="discovery__item"></li>
    </ul>
  </section>

• section영역의 경우 HTML5부터 사용시작한 시멘틱요소로, section 태그 안에 제목요소를 하나 반드시 포함해야합니다.

2. BEM방식의 class 부여

css작업시 요소선택자를 이용한 작업은 바람직 않을 수 있기에 각각의 요소마다 클래스 요소를 삽입해 작업을 하는 것이 효율적일 수 있습니다.

가장 많이 사용되는 네이밍 컨벤션인 BEM방식을 이용해 마크업을 해보도록 하겠습니다.

B__E--M방식

• (block - Element - Modifier )의 약자
• 바깥쪽 블록 안에 포함된 element를 구분할 때 __를 이용해 구분
• 컴포넌트의 스타일을 변경 등의 경우 modifier 확장되거나 상태를 의미하는 수정자를 의미하는 --를 이용해 구분합니다.
• BEM 방식을 이용하면 추후 클래스명만 보아도 이것이 어떤 영역에 포함된 컨텐츠이고, 어떤 기능을 가지고 있는지를 알 수 있습니다.
• BEM방식에 대한 자세한 내용은 ▶[HTML]네이밍 컨벤션 BEM에서 확인할 수 있습니다.

  <header class="headere">
    <h1 class="brand">
      <a href="https://www.coupang.com/" class="brand__link">
        <img src="./assets/logo/logo.png" alt="COUPANG" class="brand__image" />
      </a>
    </h1>
  </header>

  <section class="discovery">
    <div class="discovery__headline">
      <h2 class="discovery__title">오늘의 발견</h2>
      <span class="divider">|</span>
      <p class="discovery__subtitle">오늘 쿠팡이 엄선한 가장 핫한 제품</p>
    </div>
    <ul class="discovery__list">
      <li class="discovery__item"></li>
    </ul>
  </section>

class="divider"의 경우 다른 영역에서도 사용을 할 수 있기 때문에 BEM를 이용해 클래스를 부여하지 않았습니다.

3. aria요소 활용

  <section class="discovery">
    <div class="discovery__headline">
      <h2 class="discovery__title">오늘의 발견</h2>
      <span class="divider" aria-hidden="true">|</span>
      <p>오늘 쿠팡이 엄선한 가장 핫한 제품</p>
    </div>
    <ul>
      <li></li>
    </ul>
  </section>

• aria-hidden
  • class="divider" 의 경우 디자인용으로 구분선의 역할만 하기에 스크린리더 이용자들에게 노출되지 않아도 됩니다. 이런 경우 aria-hidden관련 속성을 이용할 수 있습니다.
• aria-label=""
  • aria-label은 화면상에 노출되지 않습니다.
  • svg태그에 alt속성을 추가할 떄도 이용을 할 수 있습니다.
  • aria-label="2개의 배너 중 1번 배너 보기" 버튼태그의 정확한 사용용도를 전달할 수도 있습니다.
• role="text"
• <em class="product__price" role="text">12,900<span class="currencyUnit">원</span></em>과 같이 span태그로 묶어 강조를 하는 경우 스크린리더 사용자가 12,900원을 끊어읽지 않고 한번에 읽을 수 있도록 도와줍니다.

a 태그 안에 a태그를 사용할 수 없습니다.