TIL #2 <img>태그 와 css background-image 차이

ahn__jh·2021년 3월 15일

Sementic Web

Sementic Web이란? 의미론적인 웹을 말한다. (뜻 그대로 의미가 있는 웹)

웹 기술이 크게 발전하면서 수많은 정보들이 웹, 서버들에 축적이 되었다.

이 많은 정보들을 해석하려면 컴퓨터가 해석할 수 없는 정보들이 많기 때문에 사람이 직접 해석해야 하는 상황이 발생되었다.

이를 고안해 기계가 스스로 해석할 수 있도록 웹을 만들 수 있도록 한 것 이 바로 Sementic Web 이다.

Sementic Tag란 태그를 보고 어떤 콘텐츠 인지 알 수 있는 태그를 말한다.

non-sementic tags : div, span과 같이 출력을 지정하지 않으면 div,span 태그만 봐선 콘텐츠 적으로 무엇을 나타내고 있는지 알 수 없는 태그들

sementic tags : img, table, header, footer 등등 처럼 이태그들이 콘텐츠 들의 의미를 명확하게 알수 있는 태그들

<img src="이미지 파일경로 or 이미지 url주소"
alt="이미지설명">

콘텐츠로 사용할 때 직관적으로 확인 가능하며, 출력 시 에도 사진이 같이 출력됨

이미지가 직관적으로 사용되어 이미지가 삭제되거나 주소가 변경되어 보이지 않을 때 이미지 설명을 추가할 수 있다.

시각장애를 갖은 이용자 혹은 이미지가 출력되지 않는 브라우저 사용 시 alt를 이용한 검색 또는 음성 설명이 가능함

<div class="img1"></div>
css
.img1{background-image: url("url주소 or 파일경로");
}