[HTML/CSS] Semantic Web와 Semantic Tags(feat. <img>와 <div>태그에 background-image 속성 추가 비교하기)

1. Semantic Web의 의미

 

semantic
의미의, 의미론적인

 

 Semantic Web이란? 

시맨틱(Semantic)은 ‘의미론적인’이라는 뜻으로,

현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 파일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를

기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다.

즉, 웹상에 분산되어 있는 다양한 데이터, 서비스들을 의미적 관계로 연동하기 하기 위해 시맨틱 정보를 활용할 수 있도록 하고,

이를 통해 복잡한 의미적 연결과 이에 기반한 처리가 가능하도록 하기 위한 시맨틱 웹기술과 응용에 대한 표준이다.

 

... 도통 무슨 소리인지...

이 글을 쓰면서 함께 공부해봅시다.

우선 온톨로지에 대해 알아봅시다.

 

 ontology 

존재하는 사물과 사물 간의 관계 및 여러 개념을 컴퓨터가 처리할 수 있는 형태로 표현하는 것.

 

쉽게 말해

어떠한 개념들을

기계가 처리할 수 있도록

명시해주는 것 입니다

그러면,

"정보들을 기계가 처리할 수 있는 온톨로지 형태로 표현한다"는 말은

사람만이 이해할 수 있었던

사람이 보고 있는 정보들을

기계가 이해할 수 있도록

정보들한테 특정한 개념을 명시해주는 거죠

물론 이 개념은 개인 개인이 정의하는 것이 아니라

사회에서의 약속을 통해 정해집니다

---

2. Semantic Tag의 쓰임

예시로 들어서 한 번 더 이해해봅시다.

시멘틱 태그가 생기기 전

HTML에서 우리는 

<div id="nav"> <div class="header"> <div id="footer">

이런 식으로 하나하나 붙여줘야 했죠

넌 "길잡이(nav)"라는 역할이 되어라..

넌 "머리말(header)"이라는 역할이 되어라..

넌 "꼬리말(footer)"이라는 역할이 되어라..

이렇게 쭉 쓰다 보니 누군가는 생각했겠죠

계속해서 같은걸 정의하는 반복적인 작업이 비효율적이라는 것을..

"나 말고도 이건 많이 쓰니까 그냥 확 정의 내려서 묶어야겠다^^"

그렇게 수많은 정보가 단 하나의 개념이 되어 태그로 약속됩니다.

---

3. Semantic Tag 목록

 HTML semantic Eldements (Tags)

더 많은 태그들이 보고 싶다면?

https://www.w3schools.com/tags/default.asp

 

---

한눈에 이해하기

HTML에서 머리말을 지정해볼까?

[HTML4]

👩‍💻 : 우선.. 클래스 지정하고...

<div class="header">

---

Semantic 사용✨

---

[HTML5]

👩‍💻 : 머리말이면 <header> 태그 써야지!

<header>
( <header>라는 태그에 머리말 표현할 때 쓰이는 요소들이 저장되어있음 )

 

---

이렇게 함께 Semantic에 대해서 알아보았는데요

저도 쓰면서 정리하다 보니 이해가 더욱 잘 되었습니다

Semantic Tag덕에 가독성도 좋아졌고

더욱 편리하고 신속하게

정보를 처리할 수 있게 되었습니다

---

4. <img> 태그 vs <div>에 background-image 속성 추가

 <img> 태그 

- 의미가 있는 이미지를 추가할 때 사용

- 오류가 뜨면 alt로 부여한 대체 텍스트를 사용자가 볼 수 있음

- width와 height 값을 지정해주지 않으면 원본으로 이미지 삽입

 <div>에 background-image 속성 추가 

- 배경을 채우는 용도로 사용

- 오류가 뜨면 아무것도 보이지 않음

- 페이지 프린트시 보이지 않는다

- height를 지정해주지 않으면 이미지가 보이지 않는다

레퍼런스
- [네이버 지형 공간정보체계 용어사전] Semantic Web 시맨틱 웹
- [네이버 IT용어사전] 온톨로지
- https://www.w3schools.com/html/html5_semantic_elements.asp
- https://kutar37.tistory.com/entry/%EC%8B%9C%EB%A9%98%ED%8B%B1-%ED%83%9C%EA%B7%B8-Semantic-Tag
- https://velog.io/@tjdgus0528/img-%ED%83%9C%EA%B7%B8-vs-div-%ED%83%9C%EA%B7%B8%EC%97%90-background-image-%EC%86%8D%EC%84%B1%EC%9D%84-%EC%B6%94%EA%B0%80
- https://intrepidgeeks.com/tutorial/img-difference-between-marking-and-adding-background-image-attribute-to-marking