이미지 스프라이트 효과, IR효과, 이미지 background 사용법

사이트에서 이미지를 표현하는 방법 2가지(기본 원칙)

 

• 📌 html
  • img 태그로 표현(의미가 있을 때_없으면 이 사이트인지 모를 때)
    • alt 태그 - 대체 문자 표현
• 📌 css
  • background 속성으로 표현(의미가 없을 때_장식용)
    • 대체 문자 필요 없음

 

 

 

🤗 요즘에는 이미지를 모두 background 속성으로 표현

• 웹 표준을 준수하기 위해서는 이 2가지 알고 지켜야 한다.
  • 가상으로 대체 문자를 만들어줌(IR 효과)
  • 이미지 스프라이트 효과 기법을 사용하면 img 용량도
    줄어들고 편하다.

 

 

 

 

IR효과 (웹 준수하여 CSS 사용하는 방법)

✅ 의미있는 이미지의 대체 텍스트를 제공하는 경우

• 이미지가 없으면 대체 텍스트가 제공되지 않는 것 같음

  .ir_pm {
    display: block;
    overflow : hidden;
    font-size: 0;
    line-height: 0px;
    text-indent: -9999px;
  }

 

 

 

✅ 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때 사용

.ir_wa {
    display: block;
    overflow: hidden;
    position: relative;
    z-index: -1;
    width: 100%;
    height: 100%;
}

 

 

 

✅ 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때

ir_so {
    /* ir_screen out 약자로 임의 사용 */
    overflow: hidden;
    position: absolute;
    width: 0;
    height: 0;
    line-height: 0;
    text-indent: -9999px;
}