[카카오테크캠퍼스 선택과정] 애플 예제: 배경 이미지와 대체 텍스트

코드 보기

 

웹 접근성을 고려하기 위해 이미지에 대체 텍스트를 넣어야 한다.

html에서는 img 태그의 alt 속성을 통해 대체 텍스트를 부여하지만,

css에서 background-image: url();을 사용하면 대체 텍스트를 text-indent: -9999px;로 부여하기로 약속한다.

<!-- HEADER -->
<header>
  <div class="inner">
    <ul class="menu">
      <li class="apple-logo"><a href="javacript:void(0)">Apple</a></li>
      <li><a href="javacript:void(0)">스토어</a></li>
      <li><a href="javacript:void(0)">Mac</a></li>
      <li><a href="javacript:void(0)">iPad</a></li>
      <li><a href="javacript:void(0)">iPhone</a></li>
      <li><a href="javacript:void(0)">Watch</a></li>
      <li><a href="javacript:void(0)">Airpods</a></li>
      <li><a href="javacript:void(0)">Apple 독점 제공</a></li>
      <li><a href="javacript:void(0)">액세서리</a></li>
      <li><a href="javacript:void(0)">고객지원</a></li>
      <li class="search-starter"><a href="javacript:void(0)">검색</a></li>
      <li class="basket-starter">
        <a href="javacript:void(0)">장바구니</a>
      </li>
    </ul>
  </div>
</header>

header ul.menu li.apple-logo a,
header ul.menu li.search-starter a,
header ul.menu li.basket-starter a {
  width: 14px;
  text-indent: -9999px;
  background-repeat: no-repeat;
  background-position: center 13px;
}

 

Apple, 검색, 장바구니의 글자는 화면 밖으로 나가서 보이지 않는다.