Q. img 태그를 사용하는것과 div 태그에 background-image 속성 추가하는것 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명하시오.
해당 내용을 설명하기 위해서 Semantic Web, Semantic Tag를 알아야 한다.
Semantic Web 이란?
- 'Semantic'은 [의미론, 의미론적] 이라는 뜻으로, 직역하면 '의미론적인 웹'이라는 뜻.
웹의 구성 요소마다 의미를 부여함으로써 과거 '사람'의 언어로 이해가되던 웹페이지의 구성을
'사람+기계'가 함께 이해 할 수 있는 형태로 제작된 웹페이지입니다.
Semantic Web의 장점
검색 엔진에서의 검색에 영향을 줌으로써 "검색 최적화"에 중요한 역할을 한다.
div 태그보다 의미있는 코드 블록 활용이 가능하다.
의미있는 이름짓기(Semantic naming)는 적절한 사용자 정의 요소 / 구성 요소의 이름짓기 (naming)를 반영
Semantic Web에서 HTML img 태그와 css background-image의 차이
background-image는 이미지로 인식하지 못한다.
img 태그는 이미지 인식 및 검색이 가능하다.
※ 웹이 정보로 인지하는 여부에 따라 차이가 있다.
Semantic tag 이란?
- Semantic Web에서 사람과 기계가 이해할 수 있는 형태, 즉 활용하기 좋은 형태의 데이터로 웹을 발전시키기 위해 나온 tag입니다.
HTML5 언어에 익숙하지 않는 사람이 보고도 태그가 무엇을 의미하는지 알아볼 수 있도록 하는
태그를 Semantic tag라 한다.
Semantic tag의 종류
결론
<img tag>
를 사용하고, 그저 웹 디자인과 같은 미적요소로 이미지를 보여주기 위해서는 background-image를 사용하는것이 좋을 것 같다.