" semantic : 의미론적인, 의미가 통하는 "
🟢 Semantic Web
시맨틱 태그는 알았지만 시맨틱 웹은 생소했던 단어!
시맨틱웹 위키백과를 보면..😶 너무나 방대하고 깊이있게 기술되어있지만
웹개발에 필요한 기초적인 지식만 다루고 넘어가겠다.
✔️ 시맨틱 웹을 한 문장으로 한다면,
기계가 이해할 수 있도록 시맨틱 태그가 사용된 형태로 제작된 웹을 말한다.
✔️ 시맨틱 웹은
컴퓨터가 이해할 수 있는 잘 정의된 의미를 기반으로
의미적 상호운용성(semantic interoperability)을 실현하여, 다양한 정보자원의 처리 자동화, 데이터의 통합 및 재사용등을 컴퓨터가 스스로 수행하여, 인간과 컴퓨터 모두 잘 이해할 수 있는 웹을 만드는 것을 목표로 하고 있다.
🟢 Semantic Tag
효율적인 웹 사용을 위해 웹을 만들때 사용되는 역할과 의미를 가진 태그들을 말한다.
HTML5 대표적인 시맨틱 태그
▪️
<header>: 머리말 지정하기
▪️<nav>: 문서를 연결하는 내비게이션 링크
▪️<section>: 주제별 컨텐츠 영역 나타내기
▪️<article>: 컨텐츠 내용 넣기
▪️<aside>: 본문 이외의 내용 표시하기
▪️<footer>: 제작 정보와 저작권 정보 표시하기
▪️<address>: 사이트 제작자 정보, 연락처 정보 나타내기
🙋질문 1: ♀️시맨틱 태그 사용하지 않아도 웹페이지에 보이는 것은 같은데, 권장하는 이유가 무엇인가요?
1️⃣ 레이아웃을 잡을때 시맨틱 태그를 쓰든 쓰지않든 결과물은 같지만 실제로 웹 브라우저에서 이해하고 처리할 때는 차이가 크다.
(예 - 시맨틱 태그 사용시 ctrl+F눌러 검색할 때 웹 전체 페이지가 아닌 해당 정보가 있는 시멘틱 태그로 바로 접근하기 때문에 컴퓨터가 작업을 상대적으로 덜하게되어 효율적이다.)
2️⃣ 웹접근성 최적화 : 화면 낭독기 같은 웹 보조 기구를 이용하는 시작 장애를 가진 사람도 어려움 없이 웹 문서를 읽을 수 있다.
▪️웹접근성 : 웹 접근성은 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹사이트를 이용할 수 있게 하는 방식
🙋질문 2: <div>태그는 언제 사용하나요?
<div>는 주로 컨텐츠를 묶어 시각적 효과를 적용할 때, 즉 컨텐츠에 CSS를 적용할 때 사용한다.
🙋질문 3: 사이트에 이미지를 넣는 방법은 두 가지가 있습니다. 그렇다면 <img> 태그를 사용하는 것과 <div> 태그 background-image 속성을 사용에 대한 차이점이 무엇인가요?
<img> 는 목적이 해당 이미지를 자료로써 사용될때 SEO(검색엔진)에 최적화되어 효과적으로 노출시킬 수 있으며 <div>로 html을 작성하고 background-image`으로 CSS속성을 적용했을 때 해당이미지는 웹사이트의 구성요소이며, 시각적 효과에 포커스를 둔다.
[웹 접근성 자가진단 서비스 페이지 바로가기](https://accessibility.kr/nia/check.php)
