img의 삽입 방법

1. 태그로 이미지 넣기

<img src="이미지 경로 혹은 이미지 주소">

html 코드가 복잡해질 순 있으나 태그 자체가 image의 약어(img)를 이름으로 갖고 있으므로
html 코드를 리뷰하는 사람 입장에선 직관적으로 이미지가 삽입되어 있음을 알 수 있고
이미지가 어디에 어떤 이름을 갖고 페이지에 그려지고 있는지 알기 편하다.

2. CSS로 이미지 넣기

html에

<div class="imageSpace"></div>

삽입 후 연동시켜놓은 css에

.imageSpace {
background-image: url("이미지 경로 혹은 이미지 주소")
}

삽입

html 코드가 간결해질 순 있으나 html 코드만 봐선 해당 공간에 이미지가 삽입되어 있는지 아니면 다른 속성이 적용되어 있는지 알 수 없다.

semantic tag? Semantic web?

Semantic Tag의 역할

<div class="header"></div>

<header></header>

자기소개 페이지를 제작하면서 body 영역을 만들어 갈 때 제일 처음 썼던 태그가 header 태그 였기 때문일까 header 태그는 기억에 남는 태그 중 하나다. 그렇다면 도대체 왜 header 태그를 사용한 것일까?

div 태그에 class, id 속성을 통해 이름을 부여하면 개발자는 해당 영역이 어떤 역할을 하고 있는지 알 수 있지만 기계는 그렇지 않다. 검색엔진과 같은 기계에게, 나와 다른 개발자에게 여기부터 여기까지가 header 영역임을 알려주는 태그가 'header' 태그인 것이다.

검색엔진에게 해당 태그의 역할을 알려주는 것에 집중을 해보자. 검색엔진에 검색어를 넣고 검색을 시작하면 검색엔진은 HTML의 모든 태그들을 훑기 시작할 것이다. 이 때, 단순히 div나 span 등의 태그 (non-semantic tag)를 사용하면 우리의 검색엔진은 해당 태그가 존재하는 영역이나 컨텐츠가 어떤 역할인지는 알 수 없을 것이다. semantic tag를 사용한 semantic한 문서는 검색엔진이 조금 더 효율적이고 유의미한 결과를 불러올 수 있게 해줄 것이다.

개발자가 HTML 코드를 리뷰 혹은 유지보수하고 있는 상황이라고 가정해보자. div 태그에 CSS로 이미지를 삽입했다면 코드가 수 백, 수천 줄을 넘어갈 땐 수 많은 div의 홍수 속에서 눈과 뇌는 점점 피로해오지 않겠는가? 짧고 간결한 semantic tag로 바르게 의미를 부여해주는 일로도 미래의 나 혹은 동료의 시간을 아껴줄 수 있을 것이다.

smantic tag로 구현된 페이지는 뭐라고 부를까?

Semantic Web

웹 기술이 발전하면서 인터넷은 인류와 때어놓을 수 없는 매체가 되었고 인터넷의 전파와 발달은 무수히 많은 정보의 생산과 확산을 불러왔다. 시간이 흐르고 무한히 많이 축적된 무분별한 정보들은 사용자가 직접 개입해 처리해야하는 문제를 야기했다.

기계 혼자 정보를 이해하고 가공 할 수 있게 해주는 semantic tag는 이런 문제를 해결하기 위해 등장하였고, 자체적으로 웹 상의 정보를 탐색하고 수집하여 추론하는 정보처리 기능을 갖추게 되었다. 이러한 웹을 'Semantic Web'이라고 한다.

Semantic Web의 기술적 요소

크게 두 가지로 '메타데이터'와 '지식표현'이다.

먼저 메타데이터는 '데이터에 대한 데이터'를 말한다. 흔히 접할 수 있는 예시로는 책(=데이터)과 그 책에 대한 정보를 나타내는 서지정보(=메타데이터)가 있다.

쉽게 말해 다른 데이터를 설명해주는 데이터로 어떤 구조화된 데이터를 분석하고 분류하며 부가적인 정보를 추가하여 해당 데이터를 따라다니는 데이터를 말한다.

시맨틱 웹에서 메타데이터의 목적은 정보검색의 처리과정을 줄여주고, 사용자가 원하지 않는 데이터를 미리 걸러주며, 관련성이 많은 정보의 발견 가능성은 높여줌으로써 정보검색을 향상 시키기 위해 존재한다.

국립중앙박물관에서 제공하는 서지정보유통지원시스템

그 다음으로는 지식표현으로 '정보와 정보 사이의 연결성'을 말한다.

웹의 시작은 연결성을 통해 구현 되었고 연결성 때문에 분산적 정보공간의 역할을 한 것이다. 전통적 의미의 웹에서의 연결성은 하이퍼텍스트 링크를 통한 위치적 연결을 말하지만 sementic web에서의 연결성은 정보들 간의 의미적 연결을 더욱 강조한다.

결국 궁극적으로 분산성을 증진시키고 정보를 사용하는 사람들이 사용하고 있는 정보에 대해 확정적 의미를 가질 필요가 없다고 설명하고 있다.sementic web에선 Velog와 Github blog의 양식이 동일하지 않더라도 몇 개의 공통점을 갖고 있고 이 공통점 중요한 의미적 연결성이 존재한다면 기계 자체의 추론을 거쳐 결론을 도출해 낼 수 있고 이 결론을 토대로 새로운 양식을 만들 수도 있는 것이다.

결론

사이트에 이미지를 넣는 두 가지 방법의 차이점을 시작으로 Semantic Tag와 semantic tag를 통해 구현 된 Semantic Web에 대해 정리 해보았다.
사실 이 글에도 서두와 본론, 결론이 나눠져 있으니 header와 main, footer가 존재한다고 할 수 있다. html으로 단독 페이지를 만들고 태그를 넣어 포스팅을 한다면 나와 같은 공부를 하고 있는 사람들이 조금이라도 더 찾기 쉽게 만드는 것, 그게 바로 semantic tag고 semantic web이지 않을까 싶다.

reference
시멘틱 웹
차세대 지능형 시맨틱 웹 & 온톨로지