시작하기
오늘은 Semantic Web와 Semantic Tag 개념과 종류에 대해서 정리하였다.
단어부터 너무 생소해서 벌써 머리가 아프다(지끈지끈)
또 어떤 유익한 개념들이 HTML&CSS를 이해하는데 도움이 될 지 보도록 하자.
목차
- Semantic Web
- Semantic Tag
1. Semantic Web
Semantic Web 이란 의미론적인 웹 이라고 해석할 수 있다. wiki 를 찾아보는 중인데 이해하기가 쉽지 않지만(ㅠㅜ) 내가 정리해보았을 때는
"사용자가 원하는 정보를 보다 편리하게 이용할 수 있도록 하는 웹"
라고 할 수 있을 것 같다.
요즘에는 정보가 너무 많기 때문에 '나에게 맞는 정보를 찾는 것'이 중요한 것 같다.
이때 웹의 구성이 사용자가 다루기 쉽게 되어있다면 우리는 필요한 정보를 보다 적은 비용으로 가져올 수 있을 것이다. 이런 사용자의 편의를 위해 생겨난 것이 Semantic Web 이라고 생각한다.
2. Semantic Tag
Semantic Web을 구성하기 위한 요소이다.
예전에는 <div id='header'> 이런 식으로 하였다. 이런 방식은 일관성도 개발자와 사용자간의 이해관계가 맞지 않을 수 있다.
그러나 별도로 <header> 태그를 사용하면 좀더 명확하게 정보를 구분 할 수 있다.
이때 <header> 태그가 Semantic Tag 이다.
o Why 'Semantic Tag'
- 이게 있고 없고 웹페이지의 모양이 변하는 것은 아니다.
- '웹 접근성'이 좋아진다. 즉 웹에서 내가 원하는 정보를 쉽게 찾을 수 있다.
o Semantic Tag 종류
- : 화면 상단에 위치(로고, 로그인, 회원가입)
- : 화면 하단에 위치(이메일, 저작권, 개발자 정보)
- : 보통 영역의 아래쪽에 위치(메뉴)
- : 사이드바(광고, 검색 기능, 카테고리)
- : 뉴스 기사, 블로그 등의 내용(독립된 내용)
- : 공통된 주제의 내용을 그룹화(전체적인 내용)
tip!
그럼는 언제 쓰는 것이 좋을까?
가능하면 의미 구분을 위해서 Semantic Tag를 사용하고 공통적인 CSS로 Style를 적용할 때 사용한다.
마치며
지금까지 Semantic Web과 Semantic Tag에 대해 간단히 정리해보았다.
만약 다음과 같은 질문이 있다면
"사이트에 이미지를 넣는 방법은 두 가지가 있습니다.
태그를 사용하는 것과
태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해 보세요."
다음과 같이 대답할 수 있겠다.
"사이트에 이미지를 넣을 때
태그를 쓰는 것은 이미지가 주 컨텐츠라는 것입니다. 이미지가 하나의 정보로 사용될 때는
로 semantic으로 부여하는 것이 좋습니다.
와 CSS로 넣는 것은 이미지 외에 다른 컨테츠와 조화를 이룰 때 사용하는 것 입니다.는 어떤 이미지를 여러 콘텐츠에 배경으로 동시적용하고 싶을 때 사용하면 좋습니다."
Semantic Web은 단순히 웹 구성의 어떤 종류이지만 나에게는 앞으로 어떻게 웹을 구성해야한다는 방향을 알게 해준 개념이었다. '원하는 정보를 보다 편리하게 이용하는 것' 웹 개발에 있어 이 목표를 의식적으로 되새겨야 할 것 같다.
