CSS Reference

CSS IR 효과

IR 효과

IR 효과 Image Replacement는 이미지의 대체텍스트를 제공하기 위한 CSS 기법입니다.

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

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

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

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

3.Screnn Out
대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 사용합니다.

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

해상도에 따른 이미지 표현 방법

 @media (-webkit-min-device-pixel-ratio: 1.5){
        .iType01 .img1 {
            background-image: url(../img/test@2x.jpg);
        }
    }
@media (-webkit-min-device-pixel-ratio: 2.5){
        .iType01 .img1 {
            background-image: url(../img/test@3x.jpg);
        }
    }

사용자가 쓰는 디바이스의 해상도에 따라 @2x, @3x 등으로 비율을 조정해서 넣어주면 해상도가 높고 물리적 화면 크기가 작은 모바일 기기에서도 깨짐현상 없이 선명한 이미지를 볼 수 있습니다.
미디어 쿼리를 이용하여 작업해줍니다.