Semantic Web과 Semantic Tag(20 작성글)

Semantic(의미론적인) + Web(HTML)

 

 

: 웹문서의 궁극적인 목표는 [정보전달]로, 처음 개발되고난 후로 변하지 않고 있다. 예전의 웹은 사람이 직접 보고 자료를 이해하는 구조였다면 HTML5로 넘어오면서 인간뿐만이 아니라 컴퓨터도 문서를 이해하여 정보 소통이 가능한 형태로 변하고 있다. 이 변형된 형태가 Semanticweb으로 사람, 기계가 모두 의미를 받아들일 수 있는 지능형 웹 형태다.

 

쉽게 설명하면 단순한 코드의 형태가 아닌 코드 자체에서도 의미가 존재하는 웹이다.

 

웹사이트가 보편화되면서 방대한 양의 자료가 쏟아져 나왔다. 많은양의 자료를 공유할 수 있다는 긍정적인 부분과 너무 많은 양의 자료로 인해 원하는 정보를 정확하게 얻지 못한다는 치명적인 단점이 시간이 지날수록 부각되었다. 거기에 정형화되어 있지 않은 문서 구조는 정보의 분류를 더욱 어렵게 만들었다. 사람들은 좀 더 정확하고, 유익한 정보를 요구하지만 시스템이 그 요구를 따라가지 못하고 있었다. Semanticweb은 이러한 문제를 해결하기 위해 나타난 형태이다. 단순한 <div>와 <span>로만 이루어진 코드가 아닌 적절한 <meta>태그들을 이용하여 웹 접근성을 높이는 것이다. 

 

 

Semantic Tag

: 위 설명이 녹아든 meta태그들이 바로 Semantic Tag이다. 사람이 눈으로 보고 머릿글이라 인식하는것을 컴퓨터도 해당태그를 사용하면 머릿글이라고 이해할 수 있는것이다. Semantic Tag를 이용하면 웹접근성이 높아질뿐만 아니라 SEO(검색엔진 최적화)도 자동으로 높아진다. 쉽게 정보를 전달하고 노출될 수 있는 사이트를 제작하기 위해서는 Semantic Tag의 사용은 필수이다.

 

※ 웹, 개발자, 검색엔진 모두가 이해하기 쉬운 언어로 구성되어 있다.

 

• header / 헤더, 머릿글을 의미한다.
• nav / 네비게이션, 목차를 의미한다.
• section / 여러내용을 감싸는 큰 그룹.
• main / section과 동일한 기능을 하나 단 한번만 선언 가능하다.
• aricle / 글자가 많이 들어가는 작은 내용들.
• aside / 왼쪽, 또는 오른쪽에 존재하는 사이드 공간을 의미한다.
• footer / 푸터, 꼬리말을 의미한다.

 

기본적인 Semantic Tag는 위 태그들이다. 해당 태그를 사용하여 레이아웃을 쌓아올리며 제작한다.

 

 

---

 

 

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

 

 

 

생각한 답변 : 

 

img태그와 속성에 이미지를 추가하는 방식의 가장 큰 차이점은 정보전달이 가능한지입니다. img태그를 사용할 경우 alt, class 등으로 해당 이미지에 대한 정보를 전달할 수 있습니다. 하지만 background-image 속성은 body안에 정보를 남기지 않습니다.

 

img 태그는 해당 이미지로 상대방에게 정보를 전달하여, 공유와 검색이 가능하게 제작하고 싶을때 사용하는 것이 좋습니다.

웹에 올라온 정보글을 시각적으로 전달하는 보조적 용도뿐만이 아니라 웹이 이해하여 SEO에 노출되는 용도로 사용하는것입니다.

 

background-image 속성은 별도의 정보를 담지 않은 큰 이미지 또는 디자인적인 데코레이션이미지를  사용할때 사용하는것이 좋다 생각합니다.