"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. 태그를 사용하는 것과
태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."
- 위에 질문에 대답하기 위해서는 Semantic Web과 Semantic Tag에 대해서 알아야 한다.
📌Semantic Web
Semantic Web은 ‘의미론적인 웹’이라는 뜻으로, 기계가 이해할 수 있는 형태로 제작된 웹을 의미한다.
또 사람의 머리 속의 언어에 대한 이해를 컴퓨터 언어로 표현하고 이것을 컴퓨터가 사용할 수 있게 한다.
Semantic Web은 웹에 존재하는 수많은 웹들의 메타데이터를 부여하여,‘의미’ 와 ‘관련성’을 가지는 거대한 데이터베이스를 구축하고자 하는 것이다.
그리고 이것을 기반으로 Semantic Tag가 만들어졌다.
Semantic Web이 만들어지기 전에는 div나 span으로 사용했다.->
<div id="header">제목<div>이처럼 id명으로 사람만이 이해할수 있는 의미를 만들었다면
Semantic Web이 만들어진 후->
<header>제목</header>컴퓨터는 위의 코드가 제목임을 알 수 있게 되었다.
오른쪽의 태그들은 그 자체로 의미를 가진 Semantic Tag이고 그 외 Semantic Tag는 다음과 같다.
📌Semantic Tag가 중요한 이유.
- SEO ( Search engine optimization )
검색을 최적화하기 위해서 우리가 제목, 부제목, 시멘틱 테그를 잘 활용한다면, 특정 키워드로 검색했을 때, 내가 만든 웹싸이트가 검색창에 노출될 수 있다. 다시 말해서, 브라우져의 검색 엔진이 내가 만든 웹싸이트를 어떤 검색 결과에 띄워줘야 될지를 알려줄 수있다.
- 웹 접근성
웹페이지를 시각적이 아니라, 음성으로 읽어주는 "스크린리더"를 이용하거나 또는 키보드만을 이용해서 내가 만든 웹싸이트를 이용하는 경우, 적절한 시멘틱 태그로 잘 만들어진 웹싸이트라면 스크린리더이든, 키보드만을 사용해서 동작하든 문제없이 동작할 수 있다.
- 유지보수성
단순히, div tag로만 모든 구조를 짜는 것보다 더 한 눈에 알아볼 수있기 때문에, 다른 개발자들이 코드를 유지보수하기가 더 편해진다.
📌img 태그를 사용하는 것과 div 태그에 background-image 속성을 추가하는 것의 차이.
img 태그
Semantic Tag로써 컴퓨터가 이해할 수 있고 alt 속성으로 에러 발생시 이미지가 깨져도 어떠한 이미지인지 알 수 있다
background-image
의미있는 태그가 아닌 그냥 속성으로 에러시 어떠한 이미지인지 어떠한 정보도 알 수 없다. 그러므로 컴퓨터는 이 태그가 어떤 이미지인지 알 수 없다.
결론
사용자를 위한 웹에서 에러발생 시 이미지가 깨져도 어떠한 이미지인지 정보가 들어가야하고 조금 더 검색엔진에 의해 웹이 잘 노출 되도록 하기 위해선 시맨틱 태그인 img 태그를 사용하고, 그저 웹 디자인과 같은 미적요소로 이미지를 보여주기 위해서는 background-image를 사용하는게 좋다.
출처=https://chanho-yoon.github.io/web/web-semanticWeb-semanticTag/
