CSS 이미지표현법

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

img 태그 사용법

• img는 HTML 문서에 이미지를 삽입하는 태그입니다.
• 이미지의 의미가 있을 때 img 태그를 사용합니다.
• alt 태그를 이용해서 대체 문자를 적어야 합니다.

주요 속성

src : 이미지의 경로

alt : 이미지를 표시할 수 없을 때 출력할 내용

width : 이미지의 가로 크기

height : 이미지의 세로 크기

loading : 이미지 로딩 방식

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

Background 속성

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

 

주요 속성

background : 백그라운드 속성을 일괄적으로 설정

background-image : 백그라운드 이미지 및 배경 속성을 설정

background-repeat : 백그라운드 이미지의 반복 여부를 설정

background-position : 백그라운드 이미지의 위치 영역을 설정

background-size : 백그라운드 이미지의 사이즈를 설정

background-origin : 백그라운드 이미지의 위치 기준점을 설정

background-attachment : 배경 이미지의 고정 여부를 설정

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

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

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

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