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

• Semantic Web(시멘틱웹)의 정의

  '의미론적인 웹'이란 뜻으로, 웹 페이지들에 메타데이터(Metadata)를 부여하여 '의미'와 '관련성'을 가지는 거대한 데이터 베이스를 구축하고자 하는 방식이다.

  이는 컴퓨터가 잘 정의된 웹정보의 의미를 기반으로 필요한 정보를 선택 및 이해하고 이에따라 선택적으로 정보를 획득, 통합, 가공할 수 있는 웹 환경을 제공한다.

위 사전적 정의는 CS지식이 부족한 나에게 굉장히 어려운 단어들로 구성되고 이해가 어려워서 나중에 봐도 한눈에 알아볼 수 있도록 나만의 해석과 이해가 필요했다.

그래서 나만의 방식으로 시맨틱웹을 쉽게 생각해보려고 했다.

👉 "컴퓨터라는 나의 절친한 친구가 21학점 범위의 시험을 앞두고 과목과 키워드에 맞게 정리한 족보를 내가 언제든 과목과 키워드를 가지고 쉽게 접근할 수 있도록 하는 웹 환경이다." 라고 생각해봤다.

2. Semantic Tags(시맨틱태그)란?

• Semantic Tags(시맨틱태그)의 정의

  Semantic Tags(시맨틱 태그)는 브라우저와 개발자에게 자신의 의미를 명확하게 표시하는 것을 의미한다.

  또한 Semantic Tags(시맨틱 태그)는 코드의 가독성과 사용하는 역할을 명확하게 명시할 수 있게 해주었다.

  
  

• non-semantic과 semantic의 차이

  (1) non-semantic : idv, span 👉 자신이 컨텐츠에 대해 설명을 해주지 않기 때문에 스타일을 지정해서 의미를 부여함(id, class)

  (2) semantic : header, nav, article, aside, footer

  👉 자신이 컨텐츠에 대해 명확히 정의를 할 수 있어 이를 활용해 코드의 가독성과 사용하는 역할을 명확하게 할 수 있다.

  👉 웹 접근성과 SEO(검색엔진 최적화)를 이룰 수 있다.

  
  

• Semantic Tags(시맨틱태그)의 요소들

  (1) header : 머리말 영역으로 문서 또는 섹션의 헤더를 나타냄( h1, h2 태그 등이 올 수 있음)

  (2) nav : 주로 메뉴에서 사용되고, 타 영역, 사이트, 타 문서 사이를 탐색할 수 있는 링크의 집합

  (3) section : 제목을 가지고 있는 문서 전체의 내용과 관련 있는 콘텐츠의 집합으로 독립적인 성격을 가졌다.(반드시 헤드라인을 가져야함 h1 ~ h6)

  (4) article : 문서 본문 중 독립된 콘텐츠의 집합으로 개별 뉴스기사, 게시물 등이 있으며 독립적인 성격을 가졌다.

  (5) aside : 사이드에 배치되는 경우가 많고, 광고 영역 등을 표시한다.

  (6) footer : 문서의 바닥글을 나타내거나 섹션의 꼬리말을 나타내는 곳에 사용되며 약관, 저작권 등을 표시한다.

  🔥 자주 사용되는 위의 요소들 외에도 다양한 시맨틱 태그의 요소들이 있으니 참고할 수 있도록 하자💪💪

3. Semantic을 통한 이미지 태그 사용의 이해

• img 태그를 사용하는 것과 div 태그에 background-image 속성을 추가하는 것의 차이
  

  (1) img태그 : 이미지가 사용자에게 웹 콘텐츠를 이용함에 있어 이해에 도움을 줄 때

  👉 검색엔진을 통한 노출이 가능

  👉 이미지 자체가 가지는 의미가 있을 때 사용자에게 정보제공

  👉 사용자가 이용하는 콘텐츠가 이미지를 중심으로 이루어져 있을 때

  (2) background-image : 순수하게 배경의 디자인만을 위해서 사용되어질 때

  👉 아이콘과 같은 반복되는 이미지 활용시

  👉 배경전체에 확대해서 보여줄 필요가 있을 경우

  👉 웹페이지 이미지 위에 텍스트가 들어가는 경우

  🔥 이정도의 경우로 두 태그의 차이점을 비교할 수 있을 것 같고, 자기소개 웹페이지를 만들며 아무 생각 없이 넣었던 이미지 태그에 대해 다시 한 번 알아가는 계기가 되었다.🔥