HTML에 이미지를 삽입하기 위해서는 두 가지 방법이 있는데 특정 태그에 CSS로 background-image 옵션을 사용하여 삽입하는 방법과 IMG 태그를 사용하는 방법이다. 이 두가지 방법중에 효율적인 방법이 무엇인지를 생각해보려면 그 배경으로 Semantic Web 과 Semantic Tag가 탄생한 이유를 알아볼 볼 필요가 있다.
시멘틱 웹이란?
시멘틱 웹(Semantic Web)은 "의미론적인 웹"이라는 뜻으로, 기계가 이해할 수 있는 형태로 제작된 웹을 의미합니다.
-위키백과
웹 1.0 시대에는 정보의 양이 그렇게 많지 않아 적재적소에 적합한 태그를 사용하는 중요성이 크게 대두되지 않았지만, 웹 2.0의 시대가 도래한 후에는 사용자들도 웹 컨텐츠 생산에 참여하게 되며 웹 정보의 양이 넘쳐나게 되었다.
정보가 많아지는 것은 좋은 일이지만 그 정보들 중에서 원하는 정보를 기계가 효율적으로 탐색하여 사용자들에게 제공해주는 것에 필요성도 같이 커져갔다.
그런 배경속에서 웹의 아버지 '팀 버너스 리(Tim Berners-Lee)' 가 효율적인 탐색을 위한 시멘틱 웹이라는 개념을 제안하게 되었고, 이 시멘틱 웹의 활용으로 기계가 더 효율적으로 웹 페이지에 대한 정보를 이해하고 가공하여 더 적절한 제안을 하게 되었다.
시멘틱 태그란?
시멘틱 태그란 시멘틱 웹을 구성하기 위해 필요한 목적성을 가진 태그들을 의미한다.
예를 들어 예전에는 웹 페이지의 설명을 <body> 태그 안에 넣어 보여줄 수 밖에 없었지만 시멘틱 웹이 된 현재에는 <meta> 태그 등을 활용해 다양한 단축 설명과 favicon image 등을 사용해 효율적인 정보 전달이 가능해졌다.
간단한 예를 하나 더 들어보자면 뉴스기사를 작성할 때 예전에는 <div> 태그를 사용하여 기사를 작성할 본문의 위치를 나누어 주었다면 현재는 <article> 을 사용할 수 있다. 똑같은 구분 역활을 하지만 기계의 입장에서나 타 개발자의 입장에서 더 효과적으로 다음 단락이 무엇을 의미하는지 명확히 할 수 있다. 웹 페이지의 네비게이션 링크를 구분하여줄땐 <nav> 태그를 사용하면 효과적이다.
결론
Backround-image는 배경 이미지를 사용하기 위해 사용하는 것이 권장되고, 웹 사이트 내의 리소스로 이미지를 삽입해야 할 때는 img 태그를 사용하는 것이 권장된다. 그 이유는 같은 웹사이트를 구성하더라도 효과적인 시멘틱 태그들을 적재적소에 사용해야 검색의 효율도 높히고 유지보수에도 유리한 시멘틱 웹사이트를 구성할 수 있기 때문이다. 🧐
