Semantic Web, Semantic Tag

🚩 시맨틱 (semantic) 의 사전적 정의
(형용사) 의미의, 의미론적인

프로그래밍에서 시맨틱이란, 한 조각의 코드가 갖는 의미를 가리킨다.

📝 시멘틱 태그(Semantic tag)란?

간단한 예를 들어 설명할 수 있다.

• <h1> 태그는 그 자체만으로 가장 상단에 위치하는 텍스트라는 '의미'를 포함한다.
• <div>, <span>과 같은 태그는 자체만으로 어떤 '의미'를 갖고 있다고 유추하기 어렵다.

이처럼 의미를 갖는 태그를 시멘틱 태그라고 한다. (이외에도 <nav>, <header>, <footer>등 다양한 시멘틱 태그가 있다.)
시멘틱 태그를 포함한 시멘틱 엘리먼트를 사용해 구축한 HTML구조를 시멘틱 웹이라고 한다.

📝 시맨틱 웹(Semantic web)이란?

현재의 컴퓨터처럼 사람이 마우스나 키보드를 이용해 원하는 정보를 찾아 눈으로 보고 이해하는 웹이 아니라, 컴퓨터가 이해할 수 있는 웹을 말한다.
웹 상의 정보에 잘 정의된 의미(Semantic)를 부여함으로써 사람뿐만 아니라 컴퓨터도 쉽게 문서의 의미를 자동화하여 처리할 수 있도록 하자는 것”으로 설명될 수 있다.

📝 시맨틱 웹을 사용하는 이유?

• 컴퓨터가 자동으로 정보를 처리할 수 있어 정보 시스템의 생산성과 효율성이 극대화된다.
• 정보를 검색할 때 요구하는 보다 정확한 결과를 가져온다.
• 서로 다른 이형질 소스의 정보를 통합하고 비교가 가능하다.
• 어떤 리소스에 대해서도 의미적이고 기술적인 정보를 연관시킨다.
• 웹 서비스의 자동화를 위해 웹에 세부 정보를 첨가시킬 수 있다.

👉 출처1 출처2 출처3 , MDN

---

🍟 사이트에 이미지를 넣는 2가지 방법

1. <img> 태그를 사용한다.
2. <div> 태그에 background-image 속성을 추가한다.

1. <img> 태그 사용하기

<!--html-->
<img src="/folder/image.jpg" alt="이미지">

사용하고자 하는 이미지에 '시멘틱 미닝(semantic meaning)'이 있을 땐 alt속성을 사용할 수 있는 <img>태그를 html문서에 삽입한다. 이를 통해 컴퓨터는 이 이미지를 시멘틱 웹의 맥락 안에서 의미있는 정보로 받아들인다.

2. <div>태그에 background-image 속성을 추가하기

<!--html-->
<div style="background-image : url(image.jpg)">
</div>

/*css*/
div { background-image : url(image.jpg) ; }

html의 <div>태그에 직접 속성을 추가하거나 css에서 선택자를 이용해 background-image 속성을 추가할 수 있다.
1번과 반대로 이미지가 '시멘틱 미닝'을 갖고 있지 않아 컴퓨터가 이미지를 이해할 필요가 없을 때 이 방법을 사용한다. 또한, 이미지의 크기를 화면에 맞추거나 이미지의 일부만 보이게 할 경우에도 이 방법을 사용한다.