1. 시맨틱 웹 이란?
시맨틱 웹은 직역하면 의미론적인 웹을 말한다. 즉, 문서가 의도한 바를 잘 전달할 수 있도록 구성 된 웹이다.
컴퓨터가 정보를 읽고 이해하여 가공하여 새로운 정보를 만들어 낼 수 있도록, 컴퓨터가 이해하기 쉬운 의미를 가진 차세대 지능형 웹을 말한다.
검색엔진에서 웹 문서의 중요한 제목으로 인식하고 인덱스에 포함시켜 검색엔진에 노출시키기 위해서는 마크업 구조를 시맨틱하게 짜는 게 중요하다.
웹을 아무리 예쁘게 만들고 싶다고 하더라도, 이미지로 웹을 구성하는 것은 좋지 않다. 웹을 통해 데이터를 전달하기 때문에, 마크업을 짤 때, 시맨틱 웹 개념을 생각하며 의미론적으로 마크업 구조를 짜야 한다.
2. HTML 요소(element)의 2가지 타입
HTML 요소는 non-semantic 요소, semantic 요소로 구분할 수 있다.
non-semantic 요소
div, span 등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않는다.
semantic 요소
form, table, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명한다.
<body>
<header>
<h1>헤더</h1>
</header>
<nav>
<ul>
<li><a href="#">Menu -1 </a></li>
<li><a href="#">Menu -2 </a></li>
<li><a href="#">Menu -3 </a></li>
</ul>
</nav>
<section>
<article>
<h1>제목1</h1>
<p>내용1</h1>
</article>
<article>
<h1>제목2</h1>
<p>내용2</p>
</article>
</section>
<footer>
<address>주소</address>
</footer>
</body>div나 span태그보다는 이와 같은 시맨틱 태그들을 사용하여 웹에서 의도하고자 하는 바를 명확히 전달할 필요가 있다.
3. Q&A
"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. 태그를 사용하는 것과 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."
background-image 속성을 추가하게 되면,
- 이미지로 인식을 하지 못하여 검색이 불가능하다.
- 프린트할 때 이미지가 포함되어 출력되지 않는다.
- alt 태그를 사용하지 못하여 이미지의 의미를 설명할 수 없다.
img 태그를 사용하게 되면,
- 이미지 인식 및 검색이 가능하다.
- 프린트할 때 이미지가 출력된다.
- alt 태그를 사용하여 이미지의 의미를 설명할 수 있다.
이렇게만 보면, img태그를 무조건 사용해야할 것 같지만, 그렇지 않은 경우도 있다.
background-image를 사용하는게 좋은 경우,
- hover버튼과 같이 일정부분만 선택해 보여줄 경우
- 이미지 위에 텍스트가 들어가는 경우
- 백그라운드로 이미지의 중요도가 높지 않을 때
- 이미지가 출력을 원하지 않을 경우
- CSS sprites를 사용해 이미지 속도를 향상시킬 경우
- 배경 전체에 확대해 보여줄 필요가 있는 경우
결론적으로 말하자면,
img 태그는 alt 태그를 사용하여 이미지 설명 및 검색이 가능한 Semantic Tag중 하나이므로, 이미지의 데이터를 명시해야할 때는 img태그를 필히 사용해야한다.
background-image 속성은 페이지 구성에 설명을 필요로 하지 않는 단순 배경이미지일 경우에 활용하기 좋다.
