HTML Reference

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

웹 사이트 이미지 표현 방법

웹 사이트에서 이미지를 표현하는 방법은 세 가지가 있습니다. 세가지 방법을 아래에 기술해 보았습니다.

첫번째 - HTML 태그를 통해서 표현

img 태그를 사용하여 표현합니다. img 태그를 사용할 때는 웹표준을 준수하기 위해 의미가 있는 이미지를 사용합니다. 거의 의미가 없는 이미지는 CSS를 이용하여 표현해줍니다. 웹표준을 준수하기 위해서는 img태그의 alt 속성을 이용하여 어떤 이미지 인지 설명 해주어야 합니다.

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

두번째 - CSS 속성을 통해서 표현

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

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

세번째 - 이미지 스프라이트 기법

이미지 스프라이트(image sprite)란 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미합니다.

웹 페이지에 이미지가 사용될 경우 해당 이미지를 다운받기 위해 웹 브라우저는 서버에 이미지를 요청하게 됩니다. 하지만 사용된 이미지가 많을 경우 웹 브라우저는 서버에 해당 이미지의 수만큼 요청해야만 하므로 웹 페이지의 로딩 시간이 오래 걸리게 됩니다.

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

가상으로 대체 문자를 만들어 주기 위해서는 IR 기법을 사용합니다.

먼저 이미지의 크기를 지정 해주고 Background 태그를 사용해서 이미지를 넣습니다.

그 후에 Background-position을 사용해서 이미지 위치를 지정하여 원하는 이미지를 로딩 합니다.

width: 23px; height: 23px; background: url(../img/icon.png) no-repeat;
background-position: -150px -120px;