Semantic Web과 Semantic Tag

Semantic Web(시맨틱 웹)

웹에 표시된 내용을 단순한 정보 표기가 아니라 컴퓨터가 해석할 수 있는 "의미"에 중점을 두는 웹 방식. html에서 Semantic Tag를 추가하는 것을 통해 구현할 수 있음. 따라서 기존 웹의 형식과 아예 동떨어진 새로운 개념이 아니다.

 

왜 Semantic Web으로 만들어야 할까?

초창기의 웹은 사용자(사람)가 정보를 읽는 데에 중점을 두어 만들어졌다. 시간이 지나면서 프로그램 또한 웹을 읽고 분석하여 처리를 할 필요성이 생겨났으나, 프로그램이 웹을 분석하고 활용하기에는 웹의 코드가 너무 포괄적인 내용을 담고 있었다.

 

Semantic Tag

이러한 문제를 해결하기 위해 여러 가지 Sematic Tag들이 생겼다. html의 대표적인 태그인 <div>나 <span> 태그는 프로그램이 이 태그들에 포함된 요소들이 어떤 특별한 의미를 가진다고 이해하지 못한다. 반면 Semantic 태그인 <header> 태그 안의 요소는 웹 또는 그 페이지의 대략적 요약인 제목이라고, <main> 태그 안의 요소는 말 그대로 그 페이지의 메인 콘텐츠라고 프로그램이 이해할 수 있다.

 

풀어서 설명하자면 인터넷 커뮤니티 게시판에서 자유게시판에 글을 쓰는 것과, 특정 주제를 가진 게시판에 글을 쓰는 것의 차이라고도 볼 수 있다. 예를 들어, 강아지 훈련에 관심이 있는 사용자에게 검색엔진은 자유게시판보다는 애견 게시판의 글들을 더 추천할 것이다.

 

Semantic Tag 예시 관련 좋은 자료 : https://velog.io/@syoung125/%EC%8B%9C%EB%A7%A8%ED%8B%B1-%ED%83%9C%EA%B7%B8-Semantic-Tag-%EC%9E%98-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

 

img 태그 vs background-image??

앞서 설명한 것에서 이어지는 내용인데, Semantic Web에 관련하여 html의 img 태그와 css의 background-img는 다른 기능을 수행한다. 우리가 알고 있는 내용은 img 태그와 background-img는 웹상에 이미지를 표시하는 동일한 기능을 수행한다는 것인데, 왜 둘의 역할이 다른 것일까?

 

img 태그에는 alt 속성을 사용해 어떤 이미지인지 설명이 가능하다. 즉 프로그램이 이미지를 이해할 수 있고(대표적으로 구글 이미지 검색이 있다) 더 나아가서 웹을 읽어주는 프로그램을 사용하는 시각장애인이 어떤 이미지가 웹페이지에 있는지 알 수 있게 된다. 결론적으로 alt 속성을 사용하는 img 태그는 Semantic Tag이며 해당 이미지가 Semantic Web의 요소중 하나면 사용하는 태그이다.

 

그렇다면 background-image는 아예 쓸모가 없는 것인가? 그것도 아니다. Semantic Web에 관한 특징을 제외하고 둘을 비교한다면, img 태그 안의 이미지가 로딩이 실패할때 사용자는 속칭 엑박이라고 하는 오류 이미지를 보게 된다. 그러나 background-image를 사용해 나타내려는 이미지는 로딩이 실패하면 아무것도 출력되지 않는다.

 

img 태그와 background-image는 다음과 같은 상황에 맞게 선별하여 사용이 가능하다.

---

img 태그를 사용하는 게 좋은 경우

1. 프린트가 필요한 경우
   -백그라운드 이미지는 출력 시 포함되지 않는다.
2. 이미지가 콘텐츠의 중심으로 가장 중요한 경우에 쓴다.

 

background-image를 사용하는 게 좋은 경우

1. 일정 부분만 선택해 보여줄 경우(예 - hover버튼)
   -간단하게 css를 사용하여 이미지를 다른 것으로 손쉽게 변경할 수 있다.
2. 이미지 위에 텍스트가 들어가는 경우
   -이미지 위에 텍스트가 들어가는 경우 간단하게 텍스트 태그 안에 백그라운드를 넣는 방법을 사용할 수 있다.
3. 페이지 전체 출력 시 이미지를 제거해야 되는 경우
   -이미지가 출력되면 곤란한 경우 거나 겹치는 경우에 해당한다.
4. CSS sprites를 사용해 이미지 속도를 향상할 경우
   -다수의 img 태그를 통한 방법보다 CSS sprites 기법을 사용하면 이미지의 수정, 보관, 관리가 용이하고 미리 다른 아이콘 영역도 읽어 들여 로딩 속도도 향상할 수 있다.
5. 배경 전체에 확대해 보여줄 필요가 있는 경우
   -background-size 등의 속성을 사용해 배경 이미지의 크기를 간단하게 조작 가능하다.
   
   

---

출처 : https://velog.io/@miretta96/Semantic-Web%EA%B3%BC-Semantic-Tag

img태그 vs background이미지

다시 말해 무조건 img태그만 쓰는 것이 아닌 상황에 따라 유동적으로 두 기능을 사용하는 것이 중요하다.

 

참고 자료:

https://www.tta.or.kr/data/androReport/ttaJnal/9-2_%5B5%5D.pdf

http://koreascience.or.kr/article/JAKO200270709945525.pdf 

https://velog.io/@skyosk123/img-vs-background-image

https://velog.io/@gascoigne/%EC%8B%9C%EB%A7%A8%ED%8B%B1-%EC%9B%B9Semantic-Web​​​​

https://velog.io/@miretta96/Semantic-Web%EA%B3%BC-Semantic-Tag​