근데 사실 뒷 부분은 잘 읽히지도 않고, 이해하기도 쉽지가 않다.*
-> 등장한 이유를 좀 알아보자
먼저 웹 기술은 정보의 표현과 전달을 위한 간편한 방법을 제공해 주었고, 이에 따라 인터넷이 실생활에 까지 확산이 되면서 웹상에 방대한 양의 정보가 쌓였다.
하지만,
이렇기 때문에 컴퓨터가 정보를 읽고 직접 처리 할 수 있는 웹을 개발하게 되었는데 . .!
이게 바로 Semantic Web(시맨틱 웹) 이다
div
감싸져 있었다.<div id="header"> 내용 </div>
나온 대안이 시맨틱 웹이고, 그에 따라서 HTML5에서 시맨틱 태그(Semantic tag)라는 것이 나온 것이다.
<header>
: 헤더를 의미한다.
<nav>
: 네비게이션을 의미한다.
<aside>
: 사이드에 위치하는 공간을 의미한다.
<section>
: 본문의 여러 내용(artivle)을 포함하는 공간을 의미한다.
<article>
: 본문의 주 내용이 들어가는 공간을 의미한다.
<footer>
: 문서 또는 섹션의 바닥글을 지정한다.
웹 사이트에 이미지를 넣는 방법
<img>
<img alt="HTML" src="https://www.w3schools.com/whatis/img_js.png" >
background-image
.bg-img {
background-image: url("https://upload.wikimedia.org);
}
<img>
와 background-image
의 차이점
img
태그에는 src
이외 atribute인 alt
가 존재한다. alt
속성에 작성된 문자열이 뜨게된다. !background-image
는 alt
속성이 따로 없으며,[왜 이것이 중요한가 ?]
사용자의 검색에 노출되기 위해선
img
태그를 사용해야한다
alt
속성에 작성된 문자열은 meta정보가 되게 때문에 **사용자가 검색 시alt
속성에 지정된 문자열을 인식하게 되기 때문이다 ! !하지만 단순히 사이트를 꾸미기 위해 이미지를 불러오려고 한다면 ?
background-image
를 사용하는것이 좋다.