- 사이트에
<img>
태그를 사용하는 것과<div>
태그에 background-image 속성을 추가하는것의 차이점과 어떠한 경우에 사용하면 좋은지 알아보자 !- Semantic Web 과 Semantic Tag에 대해 알아보자 !
Semantic : '의미의', '의미론적인'
HTML5에 도입된 semantic tag 는 개발자와 브라우저에게 의미있는 태그를 제공한다.
non-semantic elements : <div>, <span>
semantic elements : <form>, <table>, <article>
일반적으로, <div>, <span>
태그만 보고는 이 태그 안에 들어간 내용을 알 수가 없다 😂
반면, <table>, <article>
등의 태그는 대략 어떠한 내용이 들어갈지 유추할 수 있다.
<table>
태그 안에는 표가 들어갈 것이고, <article>
태그 안에는 글이 들어갈 것이다.
<section>
: 문서에서 세션을 정의할 때 사용한다.<header>
: 헤더<nav>
: 네비게이션<aside>
: 사이드에 위치하는 공간을 의미<article>
: 본문의 주 내용이 들어가는 공간을 의미<footer>
: footer
- 시맨틱 웹은 "의미론적인 웹" 즉, 기계가 이해할 수 있는 형태로 제작된 웹을 말한다.
- 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여 기존의 잡다한 데이터 집합이었던 웹페이지를 '의미'와 '관련성'을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.
"사이트에 이미지를 넣는 방법은 두 가지가 있습니다.
<img>
태그를 사용하는 것과<div>
태그에 background-image 속성을 추가하는 것.
두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."
: 차이점은 background-image 속성에 있는 이미지는 Google에서 크롤링하거나 색인을 생성하지 않습니다.
img 태그에는 alt=""
로 이미지에 대한 설명을 넣을 수 있어 노출되는 용도로 사용이 가능합니다.
그에 반해 background-image는 이미지에 대한 정보를 가지고 있지 않습니다.
의미가 있는(ex, 글과 함께 있어야 하는 관련 이미지라면 <img>
태그를 사용하고 background-image는 '장식'으로 할 때 사용하는 것이 좋습니다.