Semantic Web 과 Semantic Tag

윤수민·2022년 10월 18일
0

웹 기본지식

목록 보기
1/1
post-thumbnail

#1 시맨틱 웹 (Semantic Web)이란?

  • 시맨틱 웹 (Semantic Web) : Semantic은 사전상 '의미론적인, 의미의' 이라는 뜻을 가지고 있습니다. 인터넷이 폭발적으로 보급되고 웹상에 축적되는 정보의 양이 방대해짐에 따라 정보 검색시 불필요하거나 덜 연관성있는 정보를 거를 필요성이 대두되었습니다.
    따라서 단순히 사람만이 웹의 정보를 파악하는 것이 아니라, 자동화된 기계가 그 의미를 해석하고 정보간의 관계를 이해할 수 있도록 하는 것이 시맨틱 웹의 목적입니다.
<!-- 시맨틱 태그 미사용 예 -->
<div>
  <div style="font-size: 2em; font-weight: bolder">
    귀여운 강아지
  </div>
</div>
<!-- 시맨틱 태그 사용 예 -->
<header>
  <h1>
    귀여운 강아지
  </h1>
</header>

위 HTML 형식과 아래 HTML 형식은 웹문서상 보이는 결과는 같습니다.
하지만 첫번째 예시는 태그만 봐서는 어떤 내용인지 유추하기 어렵습니다.
반대로 두번째 예시는 headerh1이라는 명확한 의미가 있는 태그를 사용함으로써 코드의 가독성을 높일뿐 아니라 문서의 핵심요소를 빠르게 파악할 수 있습니다.

#2 img VS background-img

  • 둘의차이점 : 두 방식 모두 이미지를 웹화면으로 구현할 수 있는 방법이지만, img는 의미가 내포되어 있는 시맨틱 태그임에 반해
    background-img는 그 반대라 사용 용도가 다릅니다.
    이 점 유의하며 둘의 차이점을 알아보고자 합니다.

#3 img

  1. 회사 로고, 인물 프로필 사진 등 콘텐츠 정보와 연관이 있는 이미지를 쓸 때 (alt속성 함께 사용)
  2. 경고 아이콘과 같이 중요한 의미가 내포된 이미지를 쓸 때 (마찬가지로 alt 속성 함께 사용)
  3. 페이지 프린트시 이미지가 함께 나오도록 할 때

#4 backgruond-img

  1. 이미지가 콘텐츠의 일부가 아닐 때
  2. 이미지 스프라이트를 이용할 때

#5 정리

  • 사용자는 검색을 통해 정보를 가져간다.
    내 이미지가 사용자의 검색에 노출되어야 한다면, img 태그를 사용하는 것이 좋다.
  • 사이트를 꾸미기 위한 장식
    이미지의 활용이 순수 사이트의 장식을 위해서라면, background-image를 사용하는 것이 좋다.
profile
안녕하세요!

0개의 댓글