img태그 background-img 의 차이점

※ img태그 와 background-img의 차이점

 

@이미지를 적용하는 두 가지 방법

- 이미지를 마크업 하는 가장 기본적인 방법은 앞에서 소개했던 사례와 같이 HTML 코드 내에 

  태그를 사용하는 것으로 이는 이미지를 전경(foreground) 처리하는 방법과 
  스타일시트의 background-image 속성을 활용해 배경(background) 처리하는 방법이 있습니다.

- 해당 이미지 자체가 정보 전달의 의미가 있는 것이라면 (예를 들어, 광고 배너, 상품 이미지, 프로필 사진 등...) img태그를 사용하고,
  단순히 디자인적 요소(배경 이미지, 애니메이션 효과 이미지 등)라면 background-image를 사용하는 것이 좋을 것 같다.

 

- img태그 = 이미지 인식 및 검색 가능.

- background-image = 이미지로 인식 못함.

 

@img 태그의 사용하는 경우

- 프린트가 필요한 경우
- background-image는 출력시 포함되지 않는다.
- img 에 문구가 사용되어 의미를 가지는 경우
- img에 의미가 있는 경우, alt 태그를 사용해 의미 설명 가능.
- img 가 중요한 경우

@background-image를 사용하는 경우

- 일정 부분만 선택해 보여줄 경우(예 - hover버튼)
- 간단하게 css를 사용하여 이미지를 손쉽게 변경 가능.
- img  위에 텍스트가 들어가는 경우
- img  위에 텍스트가 들어가고, 백그라운드로 중요도가 높지 않을 때.
- 페이지 전체 출력시 이미지를 제거해야 되는 경우
- img 가 출력되면 곤란한 경우거나 겹치는 경우.
- CSS sprites를 사용해 이미지 속도를 향상할 경우
- 다수의 img 태그를 통한 방법보다 CSS sprites 기법을 사용하면 이미지의 수정, 보관, 관리가 용이하고 미리 다른 아 이콘 영역도 읽어 들여 로딩 속도도 향상 가능.
- 배경 전체에 확대해 보여줄 필요가 있는 경우
- background-size 등의 속성을 사용해 배경 이미지를 간단하게 조작 가능

 

@사이즈 지정할때

- img 태그는 해당 이미지에 직접적으로 크기를 안 줘도 (width:100% 해줘도) 알아서 부모박스 크기에 맞춰서 적용이 된다.

- background-img는 해당 이미지박스에다가 직접적으로 가로*세로 사이즈를 적용해 줘야지 해당이미지가 적용이 된다.