IR 효과

ir 효과란?

몸이 불편한 사람이라도 정보를 이용하는데 불편함이 없도록 하는것이 목적이 있기 때문에 만약 시각장애인이 이 사이트를 이용할 경우 텍스트는 리더기로 읽어줄 수 있지만 이미지는 읽을 수가 없다. 그래서 이미지에 텍스트를 붙여준다. 또한 css가 동작하지 않는 환경에서도 어떤 내용인지 파악이 가능해야 하기 때문에 백그라운드로 넣어주는 이미지라고 할지라도 텍스트를 써주는 것이 좋다 이런걸 ir효과라고 한다.>

.ir_pm (Phark Method)

• 의미있는 이미지의 텍스트를 제공하는 경우에 사용
• 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 text-indent를 이용하여 화면 바깥으로 (-9999px만큼 내어쓰기)빼내어 보이지 않게 하는 방법

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

ir_wa (WA IR)

• 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때 사용
• 이미지로 대체 할 엘리먼트에 배경이미지를 설정하고 글자는 span태그로 감싼 후 z-index:-1을 이용하여 화면에 보이지 않게 처리

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

ir_so (Screen out)

• 대체 텍스트가 아닌 접근성을 위한 숨긴 텍스트를 제공할 때 사용

.ir_so {
    overflow: hidden;
    position: absolute;
    width: 0;
    height: 0;
    line-height: 0;
    text-indent: -9999px;
}