Img tag & background-image 차이

https://blog.px-lab.com/html-img-tag-vs-css-background-image/

https://nystudio107.com/blog/the-css-background-image-property-as-an-anti-pattern

https://velog.io/@geonoo99/Semantic-Web-%EA%B3%BC-Semantic-Tag-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0 

 

Img tag

html <img src="링크">

-디자인 요소가 아닌 콘텐츠와 관련

-img tag에는 스크린 리더 및 검색 엔진에서 선택할수 있는 대체 텍스트 및 제목 속성을 넣어놓는 경우가 있음

->검색엔진(SEO)에 의해 인덱싱됨

-css에 많은 배경이있는경우 페이지 로딩이 시간이 걸림(html 구문 분석될때 요청이 이루어진다)

-인라인 이미지는 그림 채우기 및 지연로딩과 같은 도구를 활용 더많은 성능 이점

-텍스트의 크기에 비례하여 이미지를 랜더링하기위해 브러우저 크기를 조정에 의존하는 경우

 

background-image

css {background-image:url("링크");}

-단순히 디자인에만 사용 되는 경우

-이미지가 컨텐츠의 일부가 아닌경우

-반복되는 이미지

 

간단히 이야기하면 

• Img tag alt에 문자열 사용가능
• Alt에 작성된 문자는 meta정보가 되며 검색엔진이 인식가능함
• Background-image 단순한 이미지 첨부, 어떠한 정보도 담지 않는다

---

semantic web  &  semantic tag

 

Semantic web

:분산환경에서 리소스(웹 문서, 각종 파일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다. Semantic web을 고안하면서 Semantic tag만들어짐 

 

-RDF: 웹상의 메타데이터의 표현과 교환을 위한 프레임워크

-xml: 태그등을 이용하여 데이터구조를 기술하는 언어의 한가지 대표적html

-ontology: 특정 지식과 관련된 용어사이의 관계정의

-agent: 사용자의 역할을 대행 지능적 자율적 임무수행

 

Semantic tag

-tag를 통해 정확한 정보제공