이미지 표현

이미지 표현

이번에는 사이트에서 이미지를 표현하는 방법 / 이미지 스프라이트 기법/ ir 효과에 대해 알아보겠습니다.

---

이미지 표현 방법

-html의 경우
     1.img 태그로 표현합니다.(의미가 있을 때, 없으면 이 사이트인지 모를 때)
     2.alt 태그는 대체 문자를 표현합니다.

-css의 경우
     1.background 속성으로 표현(의미가 없을 때_장식용)
     2.대체 문자는 필요하지 않습니다.

이미지 백그라운드

css로 속성을 주고 이미지를 넣는 방식입니다.

background : url('이미지주소');
background-image : url('이미지주소');

이미지 스프라이트

여러 개의 배경 이미지를 하나의 파일로 제작한 후 background-position 속성을 이용하여 이미지를 배치하는 방법입니다. 쉽게 말하면 각각의 이미지를 개별적으로 다운받는 것이 아니라 하나로 뭉친 파일만 다운받아 필요 부분만 떼어서 사용하는 방법입니다. 실제로 네이버에서는 메인 페이지에서 이 기법을 잘 사용하고 있습니다.
이미지 스프라이트를 사용하면 img 태그가 아닌 css의 background-image로 처리되기 때문에 alt 속성을 지정해줄 수 없습니다. 따라서 아이콘, 로고와 같이 의미상 크게 중요하지 않은 이미지의 경우에 이 기법을 사용하는 것이 좋습니다.

이미지 스프라이트 기법의 예시입니다.

이미지 스프라이트의 장점으로는
1.서버로의 요청 횟수를 줄여 사이트 로딩 속도를 줄여준다.
2.많은 이미지 파일을 관리하는 대신 하나의 스프라이트 이미지 파일만 관리하면 된다.
가 있습니다.

그러나 단점으로는 1. 이미지 개수가 늘어남에 따라 스프라이트 자체의 용량이 커질 수 있다. 1. 일부 이미지, 로고의 수정이 필요한 경우 (ex.덮어쓰기도 안될 때) 유지 보수가 까다롭다. 가 있습니다.

ir효과

이미지 대체 텍스트 제공을 위한 css 기법. 웹 접근성을 위해 사용하는 방법입니다.

Phark Method : 의미있는 이미지의 대체 텍스트를 제공하는 경우(image off 시 텍스트 안보임)

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

WA IR : 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때(image off 해도 텍스트 보임) *이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 span태그로 감싼후 z-index=-1로 화면에 안보이게 처리

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

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

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