CSS - 이미지 표현

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

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

• HTML 태그이용
• CSS 속성이용
• 이미지 스프라이트

HTML 태그

HTML의 <img>태그로 이미지를 출력하는 방법입니다. <img>태그로 이미지를 출력 할 때는 의미가 있는 이미지(ex:로고, 메뉴)여야 합니다. 그리고 이미지 로드에 실패 할 경우 대체문자(alt) 값도 넣어주어야 합니다.

기본 형태

 <img src="이미지 주소 기입" alt="대체 문자 기입">

예제

<img src="img/htmlimgtag.jpg" alt="img태그대체문자" style="width: 500px;">

출력결과

대체문자출력

CSS 속성

CSS의 background 속성으로 이미지를 출력하는 방법입니다. background 속성으로 이미지를 출력 할 때는 의미가 없는 이미지(ex:배경, 색표현)여야 합니다. 의미가 없기 때문에 대체 문자를 입력하지 않아도 됩니다. 대체 문자가 필요할 경우 IR(Image Replacement)기법를 사용합니다.

기본 형태

-background: url(이미지 주소) center top repeat-x;
background: url(이미지 주소) no-repeat 9px(가로) 8px(세로);

예제

<style>
.cssimg {
width: 500px;
height: 300px;
background: url(img/cssbackground.jpg) center;
}
</style>

<div class="cssimg"></div>

출력결과

이미지 스프라이트(Image Sprite)

이미지 스프라이트(image sprite)란 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미합니다.
웹 페이지에 이미지가 사용될 경우 해당 이미지를 다운받기 위해 웹 브라우저는 서버에 이미지를 요청하게 됩니다. 하지만 사용된 이미지가 많을 경우 웹 브라우저는 서버에 해당 이미지의 수만큼 요청해야만 하므로 웹 페이지의 로딩 시간이 오래 걸리게 됩니다.
이미지 스프라이트(image sprite)를 사용하면 이미지를 다운받기 위한 서버 요청을 단 몇 번으로 줄일 수 있습니다.
모바일 환경과 같이 한정된 자원을 사용하는 플랫폼(platform)에서는 웹 페이지의 로딩 시간을 단축해주는 효과가 있습니다. 또한, 많은 이미지 파일을 관리하는 대신 몇 개의 스프라이트 이미지(sprite image) 파일만을 관리하면 되므로 매우 간편합니다.

예제

-CSS 코드-

 

-HTML 코드-

출력결과