CSS 이미지 표현 방법
웹 접근성 이미지 표현
이미지를 표현하는 방법
- HTML --> img 태그로 표현(이미지가 의미가 있을 때)
<a href="#" class="icon1"><img src="이미지경로" alt="아이콘1"></a>
alt 태그
이미지가 없을때 출력할 대체 문자 표현(웹 접근성 조건) - CSS --> background 속성으로 표현(이미지가 의미가 없을 때) / 대체문자X
background: url(../img/icon.png) repeat-x background: url(../img/icon.png) no-repeat 9px(가로) 8px(세로);
이미지 스프라이트 기법(Image Sprite)
- 여러 개의 이미지를 하나의 이미지로 합쳐서 관리합니다.
- 이미지 스프라이트 기법을 사용하면 이미지 관리가 용이하며 웹페이지의 로딩 시간 및 용량을 줄일 수 있습니다.
- 이미지 스프라이트 기법으로 이미지를 넣을 때는 웹표준 준수를 위해 가상으로 대체 문자를 만들어야 합니다.
- 가상으로 대체 문자를 만들어 주기 위해서는 IR 기법을 사용합니다.
- 먼저 이미지의 크기를 지정 해주고 Background 태그를 사용해서 이미지를 넣습니다.
- 그 후에 Background-position을 사용해서 이미지 위치를 지정하여 원하는 이미지를 로딩 합니다.
width: 23px; height: 23px; background: url(../img/icon.png) no-repeat;
background-position: -150px -120px;
background-position: -150px -120px;