201029_TIL(IR 기법)

오늘 한 것

IR 기법

• IR 기법은 배경을 이미지로 처리하고 그에 맞는 text를 삽입하는 것이다.
• 가시적으로는 이미지로 보이지만 스크린리더 등을 활용할 시 숨겨둔 삽입 text로 알 수 있어 접근성을 높인다.

padding을 이용한 IR 기법

• 대표적인 IR 기법은 padding과 overflow: hidden을 이용한 기법이다.

.btn-prev,
.btn-next {
  /*높이 대신 패딩값을 줘서 텍스트를 숨김*/
  padding: 18px 0 0 0;
  width: 19px;
  height: 0;
  background: transparent url(./images/back_forward.png) 0 0 no-repeat;
}

.btn-event {
  /*padding의 영향으로 button 영역 밖으로 밀려난 텍스트를 hidden 처리*/
  overflow: hidden;
  height: 18px;
  position: absolute;
  top: 0;
  right: 0;
}

<div class="btn-event">
    <button type="button" class="btn-prev> 이전 이벤트 보기 </button>
    <button type="button" class="btn-next">다음 이벤트 보기</button>
</div>

aria-label 속성을 이용

• 다만 굳이 padding과 overflow를 통해 text를 밀어내는 것 보다 aria-label 속성이 훨씬 효과적인 듯하다.

.btn-event {
  position: absolute;
  top: 0;
  right: 0;
}

<div class="btn-event">
  <button type="button" class="btn-prev" aria-label="이전 이벤트 보기"></button>
  <button type="button" class="btn-next" aria-label="다음 이벤트 보기"></button>
</div>

• 위처럼 aria-label 값에 padding trick을 사용할 때 쓰는 text를 넣어주면 간단하게 해결된다. 굳이 배경처리를 위해 text를 숨길 노력이 필요없다.

• aria-label은 스크린리더 등이 값을 읽어주기 때문에 접근성 또한 떨어지지 않는다.

• 위의 두가지 방법 모두 이미지와 같이 동일하게 출력된다.

다른 예재를 통한 IR 기법

<article class="slogan">
  <h2 class="slogan-heading" title="웹카페에서 웹표준을">슬로건</h2>
</article>

1. padding과 overflow 사용

.slogan-heading {
  float: left;
  background-image: url(./images/coffee.png);
  background-repeat: no-repeat;
  width: 110px;
  height: 83px;
  margin: 0;
  padding-left: 110px;
  overflow: hidden;
}

1. 가상요소를 활용한 기법

/*text처리된 요소 뒤에 가상요소로 배경을 넣어준다.*/
.slogan-heading::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(./images/coffee.png) no-repeat 0 0;
}

1. <h2>내부 <span> 두개를 만들고 <span> 하나에 text, 하나에는 배경 이미지를 만들어 position: absolute로 겹쳐 배경만 표시하는 방법도 있다.

counter-reset 속성

.favorite-list li {
  counter-reset: numbering;
  list-style-type: none;
}

.favorite-list li:before {
  content: "";
  counter-increment: numbering;
  content: counter(numbering);
  color: white;
  display: inline-block;
  padding: 5px;
  border-radius: 5px;
  margin-right: 10px;
  background: #999;
}

• 위와 같이 counter-reset 속성을 이용하면 아래처럼 요소 앞에 가상요소 선택자를 통해 정렬된 숫자를 표기할 수 있다.

• 그게 아니라면 아래 코드를 목록 수 만큼 반복해야한다.

.favorite-list li:nth-child(1) {
  content: “1”;
}

기타

• 아래의 이미지 한장으로 네이버 메인의 모든 배경 이미지 처리가 가능함.
• 좌표값만을 통해 한장의 이미지로 각각 다른 배경을 연출한다.
• 클라이언트 입장에서도 적은 데이터 사용이 가능하여 비용을 절감한다.

Nyong’s GitHub