Semantic Web, Semantic Tags

Sementic Web

정의
- '의미론적인 웹'이라는 뜻으로, 현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다.

Sementic Web의 이상
- 사람이 웹에 있는 정보의 의미를 파악하는 것이 아닌, 자동화된 기계가 해석할 수 있는 일종의 표준 수단이 되는 것
- 인터넷의 정보를 자동으로 해석하여 처리할 수 있는 소프트웨어를 통해서 사용자의 질의에 맞는 결과를 돌려주는 것

Sementic Tag

Semantic Tag 란? 각 태그가 포함하는 내용에 맞는 적합한 정보를 제공하는 것을 의미합니다. 예를 들어 <div>나 <span>은 정확히 어떤 용도로 썼는지 알 수 없지만, Semantic Tag를 사용하면 크게 3가지의 장점이 있습니다.

Accessibility : Semantic Tag는 모바일 사용자나 장애가 있는 사용자의 접근성을 더 향상시켜 줍니다. 브라우저나 스크린 리더가 코드를 더 쉽게 이해할 수 있기 때문입니다.
SEO: Semantic Tag는 SEO(Search Engine Optimization)을 향상시킴으로써 웹 페이지의 방문자 수를 늘릴 수 있습니다. SEO가 좋을 수록 검색 엔진이 웹 사이트를 빠르게 식별할 수 있고 중요한 정보에 적절한 가중치를 부여할 수 있습니다.
Easy to Understand: Semantic Tag는 웹 사이트 소스코드의 가독성을 향상시켜 줍니다.
(출처:Semantic HTML(시맨틱 HTML) 이란?)

대표적인 Semantic Tags들

header, nav : 웹의 최상단에 위치하여 navigator 역할은 할 때 사용합니다.
main, footer : 본문과 맨아래 기타정보 등을 표기할 때 자주 사용합니다.
article, section : 주로 contents 를 나눠서 보여줄 때 많이 사용합니다.
aside : 페이지의 우측 혹은 좌측에 위치하여 목차를 보여준다거나 조금 더 편한 UX를 제공할 때 사용합니다.
video : 비디오를 올릴 때 사용합니다.

Q. 사이트에 이미지를 넣는 방법은 두 가지가 있습니다.
<img> 태그를 사용하는 것과 <div> 태그에 background-image 속성을 추가하는 것.
두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요.

：

img>태그를 써서 사진을 불러오는 것과 <div>태그에 그림을 불러오는 것은 정보성, 접근성 등의 차이가 있습니다.

<img>태그를 사용

프린트가 필요한 경우: 일단 백그라운드 이미지로 설정할 경우 이미지는 출력되지않습니다.

이미지에 문구가 사용되어 의미를 가질 때 : 이미지에 문구가 사용되어 의미를 가질 때 <alt>값을 지정할 수 있기때문에 장점이 됩니다.

이미지가 콘텐츠의 중심일 때 : image 중심의 페이지일 경우에도 <div>태그보다 장점을 가집니다.

<div> 를 사용하여 background 로 그림을 불러오는 것

일정부분만 선택해서 (ex. hover버튼으로 보여줄 때) 보여줄 때 : 간단하게 css를 사용하여 이미지를 변경할 수 있기때문에 장점이 됩니다.

이미지 위에 텍스트가 들어갈 때 : 간단하게 텍스트 안에 백그라운드를 넣을 수 있기때문에 장점이 됩니다.

배경 전체에 확대해서 보여줄 때 : 배경전체를 확대할 경우, background-size를 통해 이미지 크기를 간단히 조작가능 장점이 됩니다.
그러나 background-image의 이미지는 크롤링할 때 색인되지않는 점, 디바이스화면 너비나 해상도에 관계없이 하나의 이미지만 사용되기때문에 성능이 안좋은 단점이 있습니다.

결론적으로 페이지 내에서 필요한 상황에 맞게 <img>태그와 <div> 태그를 섞어서 이미지를 보여주는 것이 좋습니다.

그러나 순수장식용이 아니라면 최대한 <img>태그를 사용하는 것을 권장합니다.