📖Semantic Web과 Semantic Tags

마크업 할 때 의미에 맞는 태그, 요소를 사용하고, 문서를 표현할 때는 구조화를 잘하도록 하기 위해 기초를 탄탄히 공부해야한다. 이렇게 정해진 약속대로 코드를 잘 사용한다면 기계뿐만 아니라 사람도 이해하기 쉬운 코드를 작성할 수 있을것이다.😆

👉 Semantic Web

웹에 존재하는 많은 웹 페이지들에게 메타데이터(Metadata)를 부여해 잡다한 데이터 집합이었던 웹 페이지를 의미와 관련성을 가지는 거대한 데이터 베이스로 구축하는 발상이다.

기본적으로 비슷한 웹 구조 상에서 각 역할이 무엇인지 semantic tag를 사용하여 정확히 표시해주는 웹 페이지를 구조화된 웹 페이지라 하며, 적용된 모습이나 기능적인 측면에서는 사용하지 않아도 차이가 보이지는 않지만 여러 스마트 기기의 다양한 화면에서 웹 문서를 표현하기가 간단해지기 때문에 시멘틱 웹을 사용하는게 좋다.

간단히 설명하자면 semantic tag 사용 유무 차이는 느끼지 못하며 실제 기능적으로도 차이가 없다.

하지만 컴퓨터가 인식했을때 제목과 본문이 어디인지 분별하지 못하면 모바일 상으로 표현할때 왜곡이 생길 수 있고 특히 스마트폰이 대중화된 시대에서 semantic tag를 사용하지 않고 웹 페이지를 만든다는것은 많은 부분에서 경쟁력이 떨어진다.

👉 Semantic Tags

semantic tag는 태그에다가 명칭을 붙이고 의미와 역할을 부여하여 구조를 한눈에 이해할 수 있도록 만들어진 태그들이다. 레이아웃을 만들 때 사용하는 주요 태그들을 미리 약속해 놓고 적용하면 구조와 내용을 쉽게 알 수 있다. 표준화 된 semantic tag를 이용해 웹 문서를 작성하면 어떤 기기에서도 구조를 정확히 이해할 수 있다.

HTML요소는 non-semantic,semantic 요소로 구분된다.

non-semantic

• 요소(content)에 대해 설명하지 않는다.
• div, span 등

semantic

• 요소(content)의 의미를 명확히 한다.
• form, table, img, header, nav, aside, section, article, footer 등

🧐 HTML5 여러가지 Semantic Tags

header

• 화면에는 보이지 않지만 웹 브라우저가 알아야 할 정보를 입력한다.
• 외부 파일이 주로 링크 된다.

nav

• 네비게이션, 메뉴 영역이다.
• 페이지 이동을 위한 메뉴 영역 지정(페이지 이동, 특정 페이지, 사이트에 대한 연결 등)
• header, aside, footer 태그 안에서도 여러 번 포함 가능하다.
• 위치에 영향을 받지 않고 자유롭게 기술할 수 있다.

aside

• 보조 영역(사이드)영역에 본문 내용 외에 부수적인 내용을 표시하는 영역이다.
• 주로 광고, 즐겨찾기, 링크, 관련 이미지 정보 등을 제공한다.
• 사이드가 아닌 원하는 곳에도 자유롭게 위치시킬 수 있다.

main

• 실제 브라우저에 표시되는 내용이 적용된다.

section

• 문서 또는 애플리케이션의 콘텐츠를 포함한 내용을 표시한다.
• 제목(h1~h6)을 중심으로 사용된다
• 같은 테마를 가진 여러 개의 콘텐츠 내용들을 그룹화 한다.
• <section>태그 안에 또 다른 <section>을 포함한 다양한 태그 중첩이 사용 가능하다.
• 웹 페이지의 아웃라인을 표시한다.

article

• 웹 페이지의 주 내용을 기술하는 영역, 독립적인 개별 내용 영역을 지정한다.
• 여러 기능들을 그룹화 하여 재사용할 수 있게 만든다.
• 블로그 포스트, 신문 , 잡지의 기사 등의 기능을 가지고 있다.
• 텍스트, 아이콘 등이 존재할 수 있다.
• <section>과 <article>사이에 중첩 가능하다.

footer

• 웹 페이지 하단에 들어가는 저작권의 정보나 서비스 제공자 정보 등을 담을 수 있는 요소들을 포함한다.

• address태그는 콘텐츠 작성자나 사이트 소유자의 연락처 정보 등을 부가적으로 담는 기능을 한다.

  이 외 semantic tags 👉 https://developer.mozilla.org/en-US/docs/Web/HTML/Element

  외우려 하지 말고 이런 태그들이 있다는 것만 이해하자❕

Assignment 2

질문 🙋‍♀️
"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. <img > 태그를 사용하는 것과 <div> 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."

답 🙆‍♀️

<img > 태그는 의미가 내포되어 있는 시맨틱 태그로 alt값을 통해 이미지 오류 시, 이미지가 화면에 출력되지 않더라도 alt값을 통해 어떤 이미지인지 유추 할 수 있다.

반면, <div>를 사용해 css에 background-image를 주게 되면 이미지 오류 시, 이미지가 화면에 출력되지 않으면 그 이미지가 무엇인지 유추가 어렵다.

❗마치며❗

웹 페이지가 구성하고 있는 구조에 대해 이해하는 공부가 되었다.🙂
구현한다 했을 때 조금 더 명시적인 효과를 갖추기 위해 공부도 많이 하고 구조를 간단하게 짤 수 있게 열심히 연습해야겠다.❕

오늘 공부를 요약하자면 기능적인 차이는 없으나 구조적으로 더 간단하게 사용하기 위해 semantic tags를 선호한다.

예를 들어 article을 사용한다 했을 때 <div class="article"></div>으로 표현하기 보다는
semantic tags를 사용해 <article></article>처럼 보다 쉽게 사용하면 된다.🤗❕