img 태그와 background-image 속성

1. img 태그와 background-image 속성

1. img 태그의 사용하는게 좋은 경우

1. 프린트가 필요한 경우
   -백그라운드 이미지는 출력시 포함되지 않습니다.

2. 이미지에 문구가 사용되어 의미를 가지는 경우
   -이미지 자체가 어떤 의미가 있는 경우 이는 alt 태그를 사용해 어떤 이미지인지 알려줄 수 있습니다. 백그라운드 이미지는 alt 태그가 없습니다.

3. 이미지가 콘텐츠의 중심으로 가장 중요한 경우

2. 백그라운드 이미지를 사용하는게 좋은 경우

1. 일정부분만 선택해 보여줄 경우(예 - hover버튼)
   -간단하게 css를 사용하여 이미지를 다른 것으로 손 쉽게 변경할 수 있습니다.

2. 이미지 위에 텍스트가 들어가는 경우
   -이미지 위에 텍스트가 들어가는 경우 간단하게 텍스트 태그 안에 백그라운드를 넣는 방법을 사용할 수 있습니다.

3. 페이지 전체 출력시 이미지를 제거해야 되는 경우
   -이미지가 출력되면 곤란한 경우거나 겹치는 경우에 해당합니다.

4. CSS sprites를 사용해 이미지 속도를 향상시킬 경우
   -다수의 img 태그를 통한 방법보다 CSS sprites 기법을 사용하면 이미지의 수정, 보관, 관리가 용이하고 미리 다른 아이콘 영역도 읽어들여 로딩 속도도 향상할 수 있습니다.

5. 배경 전체에 확대해 보여줄 필요가 있는 경우
   -background-size 등의 속성을 사용해 배경 이미지의 크기를 간단하게 조작 가능합니다.

3. 결론

즉, 결론적으로

<img>태그는 alt 태그를 사용하여 어떠한 이미지인지 설명해 줄 수 있는 의미가

 

부여된 태그이므로 Semantic Tag의 일종으로 볼 수 있다.

하지만, background img인 경우는 따로 설명이 없으며 그냥 순수 이미지만 나타내므로 순수 장식 이미지 배경으로

 

사용하는 경우가 아니면 웬만하면 <img>태그 사용을 권장한다.