[HTML] 13. Semantic Web, Semantic Tags
사이트에 이미지를 넣는 방법은 두 가지가 있습니다. <img> 태그를 사용하는 것과 <div> 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요.
-
✅ 위의 질문에 대답할 수 있나요? 실제 면접에서 자주 다루는 질문입니다. 이를 설명하기 위해서는 Semantic Web과 Semantic Tag에 대한 이해가 있어야 합니다.
-
✅ Semantic Web과 Semantic Tag에 대한 학습은 각자 구글링을 통해 학습하시고, 해당 주제로 블로그에 글을 작성해 보세요. 위의 면접 질문에 대한 답변과 연결시켜 작성해보시면 좋겠습니다.
Semantic Web이란?
Sematic Web은 '의미론적 웹' 이라는 뜻으로, 사람의 언어를 기계가 이해할 수 있는 형태로 변환하여 컴퓨터가 사용할 수 있게 제작된 웹을 의미한다.
즉, 웹에 존재하는 수많은 웹들의 메타데이터를 부여하여 잡다한 데이터 집합이 아닌 '의미' 와 '관련성' 을 가지는 거대한 데이터베이스를 구축하고자 하는 발상이다.
#고안 전
<div id="header"></div>#고안 후
<header></header>-> 조금 더 직관적인 모습임을 알 수 있음
Semantic Tag이란?
Semantic Web에서 사람과 기계가 이해할 수 있는 형태, 즉 활용하기 좋은 형태의 데이터로 웹을 발전시키기 위해 나온 tag를 의미한다.
즉, HTML5 언어에 익숙하지 않은 사람이 보고도 저 태그가 무엇을 의미하는지 알아볼 수 있도록 하는 태그를 뜻한다.
img 태그와 background-img 속성의 차이점
img tag는 의미가 있는 semantic tag 로써 컴퓨터가 이해할 수 있고 alt 속성을 통해 에러가 발생할 시 이미지가 깨져도 어떤 이미지인지 명시할 수 있지만 background-image는 의미가 존재하는 semantic tag가 아닌 그냥 속성 으로, 에러가 발생하더라도 어떤 이미지인지 어떤 정보인지 알 수 없다는 점에서 차이가 있다.
- 사용자 편의 + 검색엔진에 의해 웹이 잘 노출되록 하기 위해서는 semantic tag인
img tag을 사용 - 웹 디자인과 같은 미적요소로 이미지를 시각화하기 위해서는
background-image속성을 사용
