Today I learn... "Semantic Web & Tag"
오늘부터 위코드 코스가 정식으로 시작 되었다.
때문에 지금까지 하던 TIL의 일차를 생략하고, 그날 배운것을 그날 작성하기로 하였다.
이번 포스팅부터는 조금 더 자세하게 작성을 하게 될것 같다.
Semantic이 무슨뜻인지 먼저 알아보자
Semantic을 사전에서 찾아보면, 다음과 같다.
Semantic : [형용사] 의미의, 의미론적인
그렇다면 Semantic web은 의미론적인 웹이라는 이야기고, Semantic tag는 의미론적인 태그라는 뜻이 되는데, 오히려 무슨 말인지 모르겠다.
Semantic web은 무엇일까?
Semantic web에 대하여 검색해봤다.
컴퓨터가 사람을 대신하여 정보를 읽고 이해하고 가공하여 새로운 정보를 만들어 낼 수 있도록, 이해하기 쉬운 의미를 가진 차세대 지능형 웹. ⇒규범 표기는 미확정이다.
정확하게 어떤것인지는 잘 모르겠지만, 컴퓨터가 사람 대신 정보를 읽고 이해하여 처리 할 수 있을 만큼 이해하기 쉽게 만들어진 웹을 의미하는것 같다.
즉 Semantic web은 컴퓨터가 이해 할 수 있는, 의미를 가지는 웹이라 할 수 있을것이다.
Semantic tag는 무엇일까?
어떻게 해야 컴퓨터가 사람 대신 정보를 읽고 처리 할 수 있을까?
개인적으론 이렇게 생각한다.
컴퓨터에게 보낼 파일을 작성 할때, 이 내용은 이런 의미라고 미리 적어둔다면 어떨까?
A라는 콘텐츠는 머릿말에 해당하고, B는 내용이야 라고 의미를 담아서 컴퓨터에게 전해주는 것이다.
그걸 모두가 약속하고, 컴퓨터도 미리 알고 있는 내용이라면, A와 B는 사람이 따로 이야기 하지 않아도 컴퓨터는 각각 머릿말과 본문에 해당한다고 이해 할 것이다.
이것이 바로 Semantic Tag이다.
예를 하나 들어보자면,
<div>를 보았을때, 이것이 어디에 해당하는 태그인지 이것만 봐서는 알 수가 없다.
이게 머릿말에 들어가던 본문에 들어가던, <div>자체는 문서를 분할 할 뿐, 내용이 어떤 의미를 가지는지는 표기하지 않기 때문이다.
두번째 예로는,
<header>와 <footer>를 보자. 우리는 header와 footer를 봤을때, 자세한 내용은 모르겠지만, 거의 모든 사람들이 header는 위에 오고 footer는 아래에 올것이란 것을 은연중에 생각 하게 될것이다.
이처럼, 태그 자체가 특정한 의미를 가지는 태그를 Semantic Tag라고한다.
이중엔 검색할때 검색엔진등에 표시 되는 내용을 나타내는 <description>이라는 태그도 있다.
검색엔진이 잘 캐치 할 수 있도록, 미리 의미를 가지는 태그를 걸어 두는것이다.
<head>는 <body>에 포함 되지 않는, 표시 되지 않는 정보를 나타내기에, 이런 의미를 가진 태그들이 더욱 중요하다.
인터넷이 발달하면서, 필요한 정보가 더욱 많아지기에 이러한 태그가 나오지 않았을까 하는 생각이 든다.
개발자들이 무분별한 div의 남발에 유지보수가 힘들어져서 분류를 위해 만들지 않았을까 하는 생각도 든다.
이러한 Semantic tag를 적절하게 사용하여, 검색엔진에서 검색 되는것에서 유리하게 하고, 유지 보수가 용이하도록 만드는것이 문서를 만드는 프론트엔드에서 필요한 능력이라고 생각한다.
다른 개발자에게 문서를 넘겼을때, 그 개발자가 이 태그의 뜻이 무엇인가 쓸데없이 고민하지 않도록 말이다
<img>태그 vs background-image
Semantic tag가 가지는 차이를 한가지 예를 들어 설명해보자면,
<img>태그와 CSS에 background-image속성이 있다.
둘다 이미지를 입력하는 역할을 하는데, 이 둘은 어떤 차이가 있을까?
가장 큰 차이는 바로 <img>태그가 가지는 alt속성이다.
이 둘은 텍스트로 작성 되어, 이미지가 표시 되어도 바로 우리눈에 보이지 않는다.
위 그림은 alt속성이 출력된 예이다.
alt 속성은 그림과 같이 마우스를 올렸을때 그림의 간단한 정보를 표시해 주거나, 그림이 로드 되지 않았을때 지정한 텍스트 값을 보여준다.
또한 alt속성은 메타데이터로서 검색엔진에 이미지가 검색 되는것을 도와주기도 한다.
반면 CSS의 background-image는 메타데이터가 없고, 단순히 웹페이지를 장식하는 이미지일 뿐이다.
즉, 가장 큰 차이는 이미지가 가지고 있는 정보가 있는가 없는가 일것이다.
때문에, 우리는 문서를 작성할때, 해당 이미지가 다른 정보를 검색엔진등에 노출 되거나, 어느정도의 의미를 가져야 한다면 <img>태그를,
정보를 노출 시킬 필요가 없는 단순 장식을 위한 이미지로서 사용한다면 background-image을 사용하는것이 맞을것이다.
