구현하는 기능과 배우는 컨셉
✅ Semantic Web & Semantic Tag
✅ img tag vs background-image
👉 Semantic Web
시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻으로, 현재의 인터넷과 같은 분산환경에서 리소스에 대한 정보와 자원 사이의 관계의미 정보를 기계가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 컴퓨터가 처리하도록 하는 프레임워크이자 기술이다.
시맨틱 웹의 이상향은, 인터넷에 방대한 양의 데이터를 컴퓨터가 자동으로 해석해 사용자가 원하는 결과값을 정확히 주는 것이다
👉Semantic Tag
사이트의 가치를 올리기 위해서 검색 엔진이 좋아하는 웹사이트의 구조로 작성해야 한다. 예를들어 <header>, <article>, <section>, <main>, <mark>, <time> 등의 태그는 문서의 구조와 의미를 표현한다. 웹에서 검색을 했을때 웹페이지의 해당 코드를 찾아 그 정보를 기반으로 의미 있는 내용이 출력되도록 하며 그런 웹을 시맨틱 웹이라고 한다.
◾ 시맨틱 태그 : head, section, article, main, summary, mark, time
◾ 시맨틱 웹 : 웹 문서를 구조화하여 의미 있는 내용을 탐색하는 웹
👉 <img> 태그를 사용하면 좋은 경우
◾ 디자인 요소뿐만 아니라 콘텐츠 와 관련된 경우
◾ 검색 엔진에 의해 색인화 됩니다. Google은 배경 이미지의 색인을 자동으로 생성하지 않습니다. 그렇지 않으면 이미지 검색 결과가 이미지 스프라이트로 채워집니다.
◾ 이미지 태그에는 화면 판독기 및 검색 엔진에서 선택할 수있는 대체 텍스트 및 제목 속성을 추가하는 기능이 있습니다.
◾ CSS에 많은 큰 배경 이미지가 선언 된 경우 브라우저가 CSS 파일을 구문 분석하고 이미지를 풀다운하는 데 시간이 오래 걸리므로 전체 페이지로드가 지연됩니다. <img> 태그를 사용하면 HTML이 구문 분석 될 때 요청이 이루어 지므로 문서의 태그 앞에 오는 모든 콘텐츠는 사용자가 읽기 시작할 수있는 정보가되므로 성능면에서 좋은 점입니다.
◾ 인라인 이미지 (img 또는 picture)는 더 많은 성능 이점을 위해 picturefill 및 지연로드와 같은 도구를 활용할 수 있습니다 .
◾ 사람들이 페이지를 인쇄하도록하고 이미지가 기본적으로 포함되도록하려는 경우.
◾ 텍스트 크기에 비례하여 이미지를 렌더링하기 위해 브라우저 크기 조정에 의존하는 경우.
👉 CSS background-image를 사용하는 경우
◾ 순전히 디자인에 사용되는 경우.
◾ 이미지가 콘텐츠의 일부가 아닌 경우.
◾ 작은 이미지의 경우 CSS 스프라이트처럼 다운로드 시간을 개선해야하는 경우.
◾ 사람들이 페이지를 인쇄하도록하고 이미지가 기본적으로 포함되는 것을 원하지 않는 경우.
◾ 반복 이미지 (블로그 작성자 아이콘에서 각 기사마다 날짜 아이콘이 반복됩니다.)
👉 background-image의 단점
1. SEO에 좋지 않다
◾ CSS background-image 속성에 있는 이미지는 Google 봇이 크롤링하거나 색인하지 않습니다
◾ background-image를 사용하는 경우, 이미지의 alt=""으로 이미지에 대한 설명과 컨텍스트를 Google에 제공할 수 조차 없다.
2. 접근성에 좋지 않다
◾ CSS background-image 속성은 접근성에 적합하지 않습니다. Screen readers는 background-image를 완전히 무시합니다.
3. 성능에 좋지 않다
◾ 디바이스 화면 너비나 해상도에 관계없이 background-image 속성에 하나의 이미지만 사용되기 때문입니다.
이상적으로 우리가 원하는 것은 반응형 이미지를 사용하여 브라우저가 디바이스의 화면 너비나 해상도에 따라 다른 크기의 이미지를 로드하도록 하는 것입니다.
◾ 브라우저가 CSS를 다운로드하고 파싱하기 전까지 이미지 다운로드를 시작할 수 없습니다
