[CSS 궁금증] img 속성과 background-image 속성의 주요 차이점

1. 사용 방식:
   • img 속성은 HTML 이미지 요소(<img>)에 직접 적용됩니다. 이 속성은 이미지 파일의 경로를 지정하여 해당 이미지를 표시합니다.
   • background-image 속성은 CSS 스타일 시트에서 요소의 배경에 이미지를 적용하는 데 사용됩니다. 이 속성은 요소의 내용과 겹쳐서 배경 이미지를 표시합니다.
2. 적용 대상:
   • img 속성은 주로 단일 이미지를 표시하기 위해 사용됩니다. HTML에서 <img> 요소를 사용하여 이미지를 삽입하고, src 속성을 사용하여 이미지 파일의 경로를 지정합니다.
   • background-image 속성은 요소의 배경에 이미지를 적용하는 데 사용됩니다. 이 속성은 텍스트나 다른 내용과 겹쳐서 배경 이미지를 표시할 수 있습니다.
3. 이미지 크기 조절:
   • img 속성은 이미지의 원본 크기를 유지하거나, width와 height 속성을 사용하여 크기를 조절할 수 있습니다.
   • background-image 속성은 이미지의 크기를 조절하기 위해서는 background-size 속성을 사용해야 합니다. 이 속성을 사용하여 이미지를 확대 또는 축소하거나, 반복 배경으로 설정할 수 있습니다.
4. 마우스 이벤트 처리:
   • img 속성을 사용한 이미지에는 마우스 이벤트를 직접 적용할 수 있습니다. 예를 들어, onclick 속성을 사용하여 이미지를 클릭할 때 특정 동작을 수행할 수 있습니다.
   • background-image 속성을 사용한 배경 이미지는 기본적으로 마우스 이벤트를 처리할 수 없습니다. 하지만 해당 요소에 대한 이벤트를 처리하는 다른 HTML 요소를 포함시켜 이벤트를 처리할 수 있습니다.