11.17 TIL

img 태그 사용법

<img alt="HTML" src=이미지 주소>

• alt: 이미지가 뜨지 않았을 때(서버에서 이미지가 삭제됐거나 잘못된 이미지 주소일 때..)
  이미지 대신 보여줄 텍스트
  
• src: 이미지 파일 경로 or 이미지 url 주소

img 사이즈 조절

img {
  width: 150px;
}

-width로 이미지 원하는 사이즈로 조절 가능

div태그에 background-image 속성을 추가하는 방법

html

<div class="bg-img">배경이미지</div>

css

.bg-img {
  background-color: 색상;
  background-image: url(이미지 주소);
  
   background-size: 원하는 사이즈%;
}

차이점

img태그를 사용시,
heigth와 width 둘중 하나만 입력하여도 브라우저에서 알아서 같은 비율로 나머지 크기도 줄여준다.

div태그에 background-image 사용시,
heigth와 width을 입력하여도 원본 이미지의 사이즈는 바뀌지 않음
원본 이미지 사이즈를 바꾸기 위해서는 background-size를 사용하여야한다.

Semantic Web

Semantic Web "의미론적인 웹"이라는뜻으로, 기계가 이해할 수 있는 형태로 제작된 웹을 의미.

-정보화 시대에 가장 많이 사용하는 것 중 하나가 검색 엔진 일것이다.
수많은 정보 중에서 검색 유저에게 필요한 정보를 찾아야하는 것이 가장 중요할 것이다.

이러한 문제점을 해결하기 위한 방법이 Semantic Web이라는 개념이다.

우리가 흔히 사용하는 네이버 검색이나, 구글 검색은 검색엔진이 전세계의 웹사이트 정보를 수집하여 우리에게 필요한 정보를 보여준다.
-> (크롤링)

그리고 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)을 만들어 주는데 이것을 인덱싱이라 한다.

인덱스를 생성할 때 사용되는 정보는 검색 로봇이 수집한 정보인데 결국 웹사이트의 HTML 코드이다.

즉, 검색 엔진은 HTML코드만으로 그 의미를 인지하는데 이때 시멘

Semantic Tag

Semantic Tag란 "HTML5에 도입된 시멘틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공한다."

예를 들어 div 태그는 non-semantic tag
table, article 등의 태그는 semantic tag

일반적으로 div tag만으로는 내용의 의미를 알 수 없다

하지만 table, article는 tag만으로도 내용의 의미를 유추할 수 있다.

이렇게 의미를 가지는 tag가 semantic tag이고, HTML5는 여러가지 semantic tag를 제공한다.

Semantic Tag 종류

<article>
<aside>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

ect...