웹 사이트 이미지 표현 방법

 

이미지 표현 방법

웹 사이트에서 이미지를 표현하는 방법은 세 가지가 있습니다.

1.HTML 태그를 통해서 표현

img 태그를 사용하여 표현합니다. img태그를 사용할 때는 웹표준을 준수하기 위해 의미가 있는 이미지(로고, 메뉴 등)를 사용합니다. 비교적 의미가 없는 이미지는 CSS를 이용하여 표현해줍니다. 웹표준을 준수하기 위해서 img태그의 alt 속성을 이용하여 어떤 이미지 인지 설명 해주어야 합니다.

2.CSS 속성을 통해서 표현

CSS에서 이미지를 표현하기 위해서는 background 속성을 이용해서 이미지를 넣어줍니다. background-image를 이용하여 url( )에 이미지의 주소를 넣어줍니다. 주로 의미가 없는 이미지(배경, 색 표현)를 표현할 때 사용합니다. 하지만 HTML의 img태그의 alt 속성처럼 설명을 해주는 기능이 없기 때문에 그렇게 좋은 방식은 아닙니다.

3.이미지 스프라이트 기법

여러 개의 이미지를 하나의 이미지로 합쳐서 관리합니다. - 위 기법을 사용하면 이미지 관리가 용이하며 웹페이지의 로딩 시간 및 용량을 줄일 수 있습니다. - 위 기법으로 이미지를 넣을 때는 웹표준 준수를 위해 가상으로 대체 문자를 만들어야 합니다. - 가상으로 대체 문자를 만들어 주기 위해서는 IR 기법을 사용합니다. - 먼저 이미지의 크기를 지정 해주고 Background 태그를 사용해서 이미지를 넣습니다. - 그 후에 Background-position을 사용해서 이미지 위치를 지정하여 원하는 이미지를 로딩 합니다.

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 등으로 비율을 조정해서 넣어주면 해상도가 높고 물리적 화면 크기가 작은 모바일 기기에서도 깨짐현상 없이 선명한 이미지를 볼 수 있습니다.
미디어 쿼리를 이용하여 작업해줍니다.