CSS 이미지 표현방법

HTML 태그를 통해서 표현하는 방법

Img 태그

이미지의 의미가 있을 때 img태그를 사용한다. Alt태그를 이용해서 대체 문자를 적어야 한다.

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

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

Background 속성

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

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

이미지 스프라이트 기법

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

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