사이트에 이미지를 넣는 방법은 두 가지가 있다.
img태그를 사용하는 것과 div태그에 background-img 속성을 추가하는 것.
두 방법에는 어떤 차이점이 존재할까?
이 차이를 이해하기 위해서는 시맨틱웹과 시맨틱태그의 의미에 대해 알아야 한다.
시맨틱 웹(Semantic Web)
시맨틱(semantic)이란 '의미론적인'이라는 뜻이다.
웹이 계속해서 발전함에 따라 정보의 가치가 중요해지며, 사용자와 컴퓨터모두 데이터를 활용하기 좋은 형태로 발전한 형태를 시맨틱웹이라고 볼 수 있다.
우리는 매일 검색엔진을 통해 정보를 검색한다. 이때 검색엔진은 웹사이트의 정보들을 수집한 뒤 예상되는 검색 키워드에 대응하는 인덱스를 만들어 둔다. 이 인덱스를 수집하는 기준이 바로 html의 태그가 되는데 그 중 시맨틱 태그의 사용 유무에 따라 인덱스 포함 여부가 결정된다.
시맨틱 태그(Semantic Tag)
우리가 사용하는 일반적인 태그(div, p, a 등)는 각각 특정한 기능을 가진 반면, 시맨틱태그는 따로 기능을 가지지 않는다.
그렇다면 우리는 왜 시맨틱태그를 사용하여 코드를 작성해야 할까?
시맨틱태그는 말 그대로 의미로써의 기능을 한다.
div만 가지고도 css를 사용해 보여지는 결과물을 멋지게 만들 수는 있다. 하지만 그렇게 하면 html을 봤을 때 한눈에 어떤 부분이 제목이고, 어떤 부분이 메뉴인지 구분하기가 어려울 것이다.
시맨틱 태그를 사용하는 것은 코드의 가독성을 높여줄 뿐만 아니라 '웹 접근성'을 위해서도 꼭 써주어야 한다. 웹 접근성이란 누구나 웹을 이용할 수 있어야 한다는 것으로, 장애인들을 위한 스크린리더가 정보를 인식하는 데에도 시맨틱태그가 중요한 역할을 한다.
따라서 처음에 궁금했던 언제 img 태그를 사용하고, 언제 div + background-image를 사용하는 지에 대해서는,
img 태그를 사용해주어야만 해당 부분을 이미지로 인식하기 때문에 콘텐츠와 관련 없이 배경이미지로 쓰인다거나 하는 경우를 제외하고는 전부 다 img태그를 사용해주면 될 것 같다...^^
