Semantic Web, Semantic Tags

Semantic Web

웹페이지를 구성하고 있는 각각의 요소들의 의미, 관계 등을 파악하고 구축하여 데이터베이스화하고자 하는 움직임을 말한다. 이를 통해 웹페이지의 구성 요소 및 컨텐츠가 가지는 의미와 다른 요소와의 관계도를 검색 엔진 또는 컴퓨터가 쉽게 파악할 수 있다.

이는 웹사이트의 수와 가지고 있는 정보가 폭발적으로 증가함에 따라, 컴퓨터가 정보 수집, 분석, 또는 검색 엔진이 정보 검색시 많은 불필요한 정보가 존재하기 때문에, 컴퓨터 (또는 검색엔진)이 정보를 체계적으로 수집, 가공하기 어렵다는 문제로 인해 추진되게 되었다.

Semantic Tag

시맨틱 웹을 용이하게 하기 위해, 의미를 가지고 있는 다양한 semantic tag들과 의미를 가지고 있지 않은 non-semantic tag가 있다.

• semantic tag : <form>, <section>, <nav>, <aside>, <footer>, <table> 등
• non-semantic tag : <div>, <span>

Semantic Web의 장점

• 검색 엔진에서의 검색에 영향을 줌으로써 '검색 최적화'에 중요한 역할을 함.
• 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색 가능.
• 의미없는 클래스 이름, 끊임없는 div 보다, 의미있는 코드 블록 활용 가능.
• 개발자에게 태그 안에 채워질 데이터 유형을 제안.
• 의미있는 이름짓기(Semantic naming)는 적절한 사용자 정의 요소 / 구성 요소의 이름짓기(namimg)를 반영.

Q. 사이트에 이미지를 넣는 방법은 두 가지가 있다. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명하라.

HTML 'img태그' VS CSS 'background-image'

웹이 정보로 인지하냐 안하냐의 차이가 있으며, 이미지의 중요도에 따라 활용방식이 다르다.

<img> 사용하는 것이 좋은 경우

• 프린트가 필요한 경우 : 백그라운드 이미지는 출력시 포함되지 않음.
• 이미지에 문구가 사용되어 의미를 가지는 경우 : 이미지에 의미가 있는 경우, alt 태그를 사용해 의미 설명 가능.
• 이미지가 중요한 경우

<div> background-image를 사용하는 것이 좋은 경우

• 일정부분만 선택해 보여줄 경우(ex: hover 버튼) : 간단하게 css를 사용하여 이미지를 손 쉽게 변경 가능.
• 이미지 위에 텍스트가 들어가는 경우 : 이미지 위에 텍스트가 들어가고, 백그라운드로 중요도가 높지 않을 때.
• 페이지 전체 출력시 이미지를 제거해야 되는 경우 : 이미지가 출력되면 곤란한 경우거나 겹치는 경우.
• CSS sprites를 사용해 이미지 속도를 향상시킬 경우 : 다수의 img 태그를 통한 방법보다 CSS sprites 기법을 사용하면 이미지의 수정, 보관, 관리가 용이하고 미리 다른 아이콘 영역도 읽어들여 로딩 속도도 향상 가능.
• 배경 전체에 확대해 보여줄 필요가 있는 경우 : background-size 등의 속성을 사용해 배경 이미지를 간단하게 조작 가능.