.png)
사이트에 이미지를 넣는 방법은 두 가지가 있습니다. 태그를 사용하는 것과
태그에 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를 습관적으로 자주 쓰곤 했는데 앞으론 지양해야겠다. 또한 개념을 이해하기 위해서는 개념이 필요한 이유에 대해서 먼저 생각해보면 더 좋은 것 같다는 생각을 했다. 특히 개발에 관련된 것들은 사용자의 편리성을 위해 생겨났기에 필요성에 대해 생각해보는 것이 이해하는데 도움이 많이 되었다!
와우...! 👍🔥🙇♀️