사이트에 이미지를 넣는 방법은 두 가지가 있다.
<img>태그를 사용하는 하기tag에background-image속성을 추가하기
html 태그 와 CSS 속성에 이미지 넣는 것에 대한 차이점은?
- alt의 유무 (alt 속성은 이미지에 대한 정보를 담고 있다.)
- Semantic Web과 Semantic Tag
HTML <img>태그
<img src = "이미지 경로" alt="이미지 정보(쿠폰)">img 태그에 사용되는 이미지가 삭제되었거나, 로딩에 실패했을 경우
이미지 대신 alt에 적어 놓은 코멘트를 보여줘서 에러난 이미지의 의도를 쉽게 알 수 있다.
CSS 배경 이미지 속성
//HTML
<div class='bg'>배경이미지</div>
//CSS
.bg {
background-image: url(이미지 주소)
}css에 img를 넣을때는 img가 콘텐츠의 일부가 아닌 이미지가 디자인에 사용될 경우에 사용한다.
사용자를 위한 에러시 이미지가 깨져도 어떠한 이미지인지 정보가 들어가야하고 조금 더 검색엔진에 의해 웹이 잘 노출 되도록 하기 위해선 시맨틱 태그인 img태그 를 사용하고, 그저 웹 디자인과 같은 미적요소로 이미지를 보여주기 위해서는 background-image 를 사용하는게 좋을 것 같다.
Semantic web이란?
시맨틱(Semantic)은 "의미의, 의미론적인"이라는 뜻이다.
Semantic web은 기계가 읽고 처리할 수 있는 형태로 제작된 웹을 의미한다.
즉, Semantic Web이란 웹에 존재하는 수많은 웹페이즈들에 메타데이터를 부여하여, 잡다한 데이터 집합이 아닌 '의미'와 '관련성'을 가지는 거대한 데이터 베이스를 구출하고자 하는 발상이다.
⭐️ Semantic web을 고안하므로 Semantic tag들이 존재한다.
시맨틱 요소(Semantic element)
인덱스를 생성할 때 사용되는 정보는 검색 로봇이 수집한 정보인데 결국 웹사이트의 HTML 코드이다.
즉, 검색 엔진은 HTML 코드 만으로 그 의미를 인지한다.
non-semantic 요소 예:
<div>와<span>
자신의 컨텐츠에 대해 아무것도 설명해주지 않는다.
semantic 요소 예:
<form>,<table>,<article>
자신의 컨텐츠를 명확하게 정의한다.
Semantic tag이란?
Semantic tag는 활용하기 좋은 형태의 데이터로 웹을 발전시키기 위해 나온 태그이다.
시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공하게 된다.
html5에서는 semantic tag를 사용하여 작업하거나 문서를 읽을 개발자들에게 가독성 있는 문서를 제공한다.
시멘틱 태그의 종류
<article><aside><details><figcaption><figure><footer><header><main><mark><nav><section><summary><time>
왜 시맨틱 태그를 사용해야 하는가?
검색 엔진 최적화(SEO)는
웹페이지의 자료를 수집하거나 순위를 방식에 맞게 웹페이지를 구성하여, 검색 결과의 상위에 나올 수 있게하는 행위를 말하는데
검색엔진은 결과를 보여줄 때, HTML의 태그들을 분석한다. 이 때,
Semantic한 문서는 검색엔진이 유의미한 결과를 낳을 수 있도해 노출에 유리하도록 만들어 준다.
웹사이트는 검색엔진에의 노출이 매우 중요하다.
검색엔진에 노출되지 않는 웹사이트에는 접속하는 사람이 없음을 뜻한다.
