CSS 웹 사이트에서 이미지를 표현 하는 방법
1. HTML에서 이미지 표현 방법
의미가 있는 이미지(로고, 메뉴)를 사용할때 img 태그를 사용하고 alt 속성으로 대체 문자를 추가해야 한다
<img src="이미지 파일 주소" alt="대체할 문자">
<img src="asset/img/img01.jpg" alt="이미지 파일">
2. CSS에서 background 속성 사용
의미가 없는 이미지(배경, 색 표현)를 사용할때 background 속성을 사용한다
의미가 없는 이미지를 사용하기 때문에 대체 문자를 추가할 필요 없다
background: url(이미지 주소);
background: url("asset/img/img01.jpg") no-repeat;
3. 이미지 스프라이트
여러개의 이미지를 하나로 묶어 관리한다
웹 표준을 준수해야 되기 때문에 가상으로 대체 문자를 ir 효과를 이용해서 추가해야 한다
background: url("asset/img/img01.jpg") no-repeat;
background-position: 150px 200px; // 이미지를 원하는 위치에 추가