프론트 앤드 면접질문 중에 항상 있다고 전해지는
사이트에 이미지를 넣는 방법 중 img tag를 사용하는 것과,
div 태그에 background-image 속성을 추가하는 것 두가지 방법의 차이점과 어떠한 경우에 사용하면 좋을지에 대해 알아보았습니다.
첫번째로 이 질문에 대답을 하기 전
우리는 먼저 Semantic Web과 Semantic Tag을 알아야 이해가 바로 됩니다!
웹 사이트는 검색엔진의 노출이 매우매우 중요한데요
검색엔진 최적화 (SEO : Search Engine Optomizetion)같은 도구를 사용해 검색엔진이 본인의 웹사이트를 검색하기 알맞은 구조로 웹사이트를 조정합니다.
하지만 기본적으로 컴퓨터는 웹사이트의 정보를 어떻게 수집할까요 ?
바로, 로봇(Robot)이라는 프로그램을 사용, 매일 전 세계의 웹사이트 정보를 수집합니다.
이때 이 행위를 크롤링이라고 하고 검색엔진의 크롤러가 이를 수행합니다.
그리고 검색 사이트 이용자가 검색할만한 키워드를 미리 예상해, 검색 키워드에 대응하는 인덱스를 만들어두는데요, 이것을 인덱싱이라고 하고 검색엔진의 인덱서가 이를 수행합니다.
인덱스를 생성할 때 사용되는 정보는 검색 로봇이 수집한 정보입니다.
결국 웹사이트의 HTML 의 코드죠
즉, 검색엔진은 html코드만으로 그 의미를 해석해야 하는데
이 때 시멘틱 요소를 해석합니다.
<span style=“font-size: 6px”> Hi How are you</span>
<h1> Hi How are you? </h1>
두 태그를 보면 브라우저 화면상으로 동일하게 출력됩니다.
하지만 span태그의 요소는 의미론적으로 아무 의미도 없는 요소입니다. 의도가 명확하지 않죠 하지만 2번째 h1태그의 요소는 header(제목)중 가장 상위레벨이라는 의미를 내포하고 있다고 말해주고 있습니다. 개발자가 의도한 요소의 의미가 명확히 드러나있죠
이것이 코드의 가독성을 높이고 유지보수를 쉽게 해주는 장점 까지 있습니다.
이때, 검색엔진은 대체로 h1 요소내의 콘첸츠를 웹문서의 중요한 제목으로 인식하고 인덱스에 포함 시킬 확률이 높습니다.
사람이 봐도 H1 태그 안의 요소가 제목임을 알 수 있습니다.
시멘틱 요소로 구성되어 있는 웹페이지는 검색엔진에 보다 의미론적으로 문서 정보를 전달하고 검색엔진 또한 시맨틱 요소를 이용해서 효과적인 크롤링과 인덱싱이 가능해졌습니다.
즉, 시멘틱 태그란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 합니다.
시맨틱 태그로 인해 컴퓨터가 html 요소의 의미를 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현됩니다.
그렇다면 시멘틱 웹이란,
시맨틱 웹이란, 웹에 존재하는 수많은 웹 페이지들에 메타 데이터 (MetaData)를 부여하여, 기존의 잡다한 데이터 집합이였던 웹페이지를 “의미”와 “관련성”을 가지는 거대한 데이터 베이스로 구축하고 자 하는 발상입니다.
HTLM 요소는 semantic 요소와 non-semantic 요소로 구분됩니다.
semantic 요소
form, table, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명한다
non-semantic 요소
div, span 등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않는다.
다음은 HTML5에서 새롭게 추가된 시맨틱 태그이다.
header - 헤더를 의미한다( 문서나 section의 헤더에 오는 태그)
nav - 내비게이션을 의미한다 (navigation links. 문서의 major link들 담는 태그. ex. 메뉴, 목차, 색인)
aside -사이드에 위치하는 공간을 의미한다 (문서의 content의 옆쪽에 위치하여 내용과 관계가 적음. 광고를 추가하기도 함.)
section - 본문의 여러 내용(article)을 포함하는 공간을 의미한다 (관련 있는 주제들끼리 grouping 해주는 태그 (문서 구획))
article - 분문의 주내용이 들어가는 공간을 의미한다
(독립적으로 의미가 있는 컨텐츠. 웹사이트의 나머지 부분과 독립적으로 읽더라도 의미를 이해할 수 있는 내용을 주로 담음. ex. 블로그 포스트나 기사)
footer - 푸터를 의미한다. (문서의 정보를 담고 있는 태그. ex. 문서의 저자, copyright 정보, term of use 링크)
이제 본론으로 돌아가서 첫 질문에 대한 대답을 하면
Img 태그와 background-Image의 차이점은 시맨틱요소인 img 태그를 사용하므로써 검색엔진에 더 노출이 될 수 있게해주면서 좀 더 목적성을 띄고 컴퓨터나 사람이 보기에도 한 번에 이해할 수 있게 해주기 위해 사용합니다.
그러므로
img 태그를 사용하는게 좋은 경우는
1.프린트가 필요할 때
-> 백그라운드 이미지는 출력시 포함이 안되기 때문입니다.
2.이미지가 문구가 사용되어 의미를 가질 때.
-> alt 태그를 이용해서 어떤 이미지인지 임시텍스트가 있기 때문에 어떤 이미지인지 알 수 있습니다.
3. 이미지가 콘텐츠의 중심으로 가장 중요할 경우입니다.
background-image를 사용하는게 더 좋은경우는
1.일정부분만 선택해서 보여줄 경우
2.이미지 위에 텍스트가 들어가는 경우
3. 페이지 전체 출력시 이미지를 제거해야 하는 경우
-> 출력시 background-image는 출력이 안됩니다.
4.배경 전체에 확대해 보여줄 필요가 있는 경우에 사용
하지면 되지만
background-image는 non-semantic 요소에 선택자를 주어 css로 제어를 하기 때문에 웬만하면 시멘틱요소인 img 태그 사용을 권장합니다.
