HTML,CSS - Img vs background-image

minzyaaaaaa·2022년 2월 15일
2

HTML, CSS

목록 보기
1/2
post-thumbnail

사이트에 이미지를 넣는 방법은 두 가지가 있습니다. 태그를 사용하는 것과
태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요.

사이트에 이미지를 넣는 방법은 2가지가 존재한다.
1. <Img> 태그 2. background-image

두 방법 모두 이미지를 넣는 기능을 구현한다는 점은 동일하다.
다만, 가장 큰 차이점으로 생각되는 점은 Img 태그에만 존재하는 alt 속성이다.

alt 속성 ?

img 태그의 alt 속성은 이미지를 보여줄 수 없을 때 해당 이미지를 대체할 텍스트를 명시합니다.
이러한 alt 속성은 사용자가 느린 네트워크 환경이나 src 속성값의 오류, 시각 장애인용 스크린 리더의 사용 등 어떤 이유로든 사용자가 이미지를 볼 수 없을 때 이미지 대신 제공할 대체 정보를 제공합니다.
출처 - TCP School

alt 속성은 해당 이미지가 사용자의 이해를 돕기 위한 역할을 하고 있다면 필요성이 도드라질 것이라고 생각된다. 이미지를 보여줄 수 없을 때 간략한 텍스트로 사이트의 맥락을 이어나가기 위해서 사용하면 좋을 것이라고 생각한다.

위 경우와 달리 이미지가 사용자의 이해를 돕기 위한 용도가 아니라면 (예를 들어 디자인을 위한 경우에는 background-image를 이용해도 상관 없을 것이다.

또한 Img는 Semantic Tag라는 것이 특징인데, 시맨틱 태그란 의미를 가지고 있는 태그로 개발자가 어떠한 의도로 사용을 했는지 더 정확하게 설명할 수 있다.

그렇다면 Semantic Web은 무엇일까? Semantic Web이란 의미론적인 웹을 의미한다.
시맨틱 태그와 시맨틱 웹 모두 의미를 가지고 있다는 것이 공통되어 있다. 코드를 작성하지 않은 사람도 쉽게 이해하고 접근할 수 있도록 하는 의도가 담겨있다.


결국 초반 질문에 대한 결론은 이렇다.
Img태그와 background-image의 가장 큰 차이점은 alt 속성의 유무이다. 사용자의 이해를 돕기 위한 이미지라면 Img태그와 alt속성을, 그렇지 않은 디자인적 요소라면 background-image를 사용하는 것이 좋다.

그 외에도 Img태그만 검색이 가능하다. 등의 차이점이 있지만, 중요하게 생각되는 부분을 중점적으로 다뤄보았다. Semantic Tag에 대해 알고 있다고 생각했지만 이 질문에 답하기 쉽지 않았다. 멘토님들이 강조하시는 메타인지의 중요성을 다시 느꼈다.😂

평소 background-image를 습관적으로 자주 쓰곤 했는데 앞으론 지양해야겠다. 또한 개념을 이해하기 위해서는 개념이 필요한 이유에 대해서 먼저 생각해보면 더 좋은 것 같다는 생각을 했다. 특히 개발에 관련된 것들은 사용자의 편리성을 위해 생겨났기에 필요성에 대해 생각해보는 것이 이해하는데 도움이 많이 되었다!

profile
레츠기릿

7개의 댓글

comment-user-thumbnail
2022년 2월 16일

평소 background-image를 습관적으로 자주 쓰곤 했는데

와우...! 👍🔥🙇‍♀️

1개의 답글
comment-user-thumbnail
2022년 2월 17일

시멘틱 태그를 사용하는 이유 중 하나에 웹접근성도 있어서 img 태그를 사용하는게 접근성을 높이고 seo에도 좋아 더 권장되는 것 같네요..! 저도 img태그 + alt속성 조합을 잘 사용해야겠습니당🤭

1개의 답글
comment-user-thumbnail
2022년 2월 20일

시멘틱태그와 이미지 넣는 방식의 차이점에 대해 잘 알고갑니다! 정리를 잘 해주셔서 내용 이해가 잘돼요✨

1개의 답글