CSS Reference

CSS 이미지 표현

웹 사이트에서 이미지를 표현하는 방법

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

1. img 태그를 통해서 표현하는 방법(HTML 태그)

이미지의 의미가 있을 때 img 태그를 사용합니다. 이 때에는 alt 태그를 이용해 대체 문자를 적어야 합니다. 여기서 대체 문자란, 이미지가 없을 때 출력할 수 있는 문자를 의미합니다.

<img src="이미지경로" alt="대체 문자">

2. CSS 속성을 통해서 표현하는 방법

이미지의 의미가 없을 때 background 속성을 사용합니다. 이미지의 의미가 없기 때문에 대체 문자를 적을 필요가 없습니다.

a { 
    background: url(이미지 경로)
}

3. 이미지 스프라이트 기법으로 표현하는 방법

여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 기법입니다. 이 기법을 사용하면 이미지 관리가 용이하며, 웹페이지의 로딩 시간 및 용량을 줄일 수 있습니다. 대신 이미지를 넣을 때는 웹표준 준수를 위해 가상으로 대체 문자를 만들어야 합니다. 개인이 운영하는 블로그는 굳이 이미지 스프라이트를 사용할 필요는 없지만, 트래픽이 아주 많거나 많은 사람들이 이용하는 검색포털과 같은 사이트에서는 아이콘 형식의 이미지들을 이미지 스프라이트를 사용합니다. 이 때, 가상으로 대체 문자를 만들어 주기 위해서는 IR 기법을 사용합니다.
IR 기법(Image Replacement)이란 이미지의 대체 텍스트를 제공하기 위한 CSS 기법으로, 다양한 CSS 기법을 사용하여 이미지의 대체 텍스트를 제공할 수 있습니다. 스프라이트 기법의 단점은 이미지 수정이 번거롭다는 점이 있습니다.

.sprite {
    background: url(이미지 경로) no-repeat-274px -68px;
    width: 53px;
    height: 57px;
}