"사이트에 이미지를 넣는 방법은 두 가지가 있습니다.
<img>태그를 사용하는 것과<div>태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."
시멘틱 웹(Sementic Web)
웹이란 네트워크 분산환경에서 웹 문서, 각종 화일, 서비스 등에 대한 정보와 자원 사이의 관계-의미 정보를 컴퓨터가 처리할 수 있는 서로간의 합의를 통해 만들어진 수단을 통하여 형태로 표현하고, 이를 자동화된 컴퓨터가 처리하도록 하는 프레임워크이자 기술입니다.
시멘틱 웹은 이러한 기존 웹을 확장하여 컴퓨터가 이해할 수 있는 잘 정의된 의미를 기반으로 의미적 상호가 용이하도록 다양한 정보자원의 처리 자동화, 데이터의 통합 및 재사용등을 컴퓨터가 스스로 수행하여, 인간과 컴퓨터 모두 잘 이해할수 있는 웹을 목표로 합니다. 그러기 위해서 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹 페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 합니다.
기본적으로 웹을 대상으로 검색엔진은 웹사이트 정보를 수집하는 방법인 크롤링에서 시작하여, 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스를 만드는 인덱싱까지 일련의 과정을 수행하면서 엔진은 HTML 코드를 사용하여 그 의미를 인지하게 됩니다.
따라서, 의미론적으로 모두가 이해하기 용이한 웹을 위해서 개발자가 의도한 요소의 의미가 명확히 드러나는 태그의 사용을 통하여 코드의 가독성을 높여야합니다. 여기서 시맨틱 태그를 통하여 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하게 됩니다. 이러한 요소를 통하여 SEO 즉, 검색엔진 최적화 실현에 더 도움이 될 수 있습니다.
시맨틱 태그(Semantic Tag)
시멘틱 태그는 시맨틱 요소와 동의어이며 자신의 의미를 브라우저와 개발자 모두에게 명확하게 설명합니다.
- non-semantic 요소들의 예:
<div>와<span>- 자신의 컨텐츠에 대해 아무것도 설명해주지 않습니다. - semantic 요소들의 예:
<form>,<table>,<article>- 자신의 컨텐츠를 명확하게 정의합니다.
과거 HTML5 이전에는 화면 레이아웃 및 개요에 대한 구성에 있어서 <div>와 <span>에 id와 class를 붙여 구역을 나누고 스타일을 지정했습니다. 하지만, 시멘틱 웹이 본격적으로 HTML5와 함께 개념이 구체화되면서 기존 방식에서 탈피해 코드의 가독성을 높이고 명확하게 하기 위해 시맨틱 태그를 도입하게 되었습니다. <div class="header">가 아니라, <header>와 같이 뜻이 명확한 태그를 제공하기 때문입니다.
Major Sementic Tag
<article>: 내용 단락
<aside>: 부가 단락, 본문과 관련된 부가정보를 노출
<details>: 클릭했을 때 확장되는 UI, 공지사항/FAQ
<figcaption>: figure 부가 설명
<figure>: 독립적인 콘텐츠
<footer>: 회사 정보, 소셜미디어 정보, 약관, 저작권
<header>: 문서의 제목, 로고, 작성자, 작성일
<main>: 문서에서 오직 한 번만 사용. 본문, 콘텐츠 내용 전체
<mark>: 하이라이트, 강조
<nav>: 주요 메뉴
<section>: 형식 단락
<summary>: 클릭했을 때 확장되는 UI, 공지사항/FAQ
<time>: 시간 내용
Q&A에 대한 답변
<strong>과 <b> 관계와 유사합니다. 앞서 이야기한 시맨틱 웹과 시맨틱 요소의 이야기를 볼 때, <img> 태그를 사용하는 것은 대상에게 해당 요소는 이미지의 속성이라는 것을 보다 명시적으로 제시하며, 추가적인 속성인 alt(대체 텍스트)를 통하여 개요에 있어서 해당 요소가 의미하는 바를 확실시합니다. 따라서, 해당 속성 및 메타데이터를 통한 검색이 가능해지고 컨텐츠에 대한 이해도가 높아집니다. 따라서, 검색엔진에게 노출도가 올라갑니다.
반면, <div> 태그에 background-image 속성을 추가하는 것은 단순한 컨테이너 블록 요소인 <div>에 배경이 되는 이미지를 추가한 것으로 이미지의 속성 및 내용을 가진다 의미가 약합니다. 따라서, 스크린 리더 등 보조 기술에 대한 접근에 있어서 이는 해석이 불가능해 집니다. 물론, 컨텐츠라는 영역에서 있어도 그만 없어도 그만인 이미지였다면, 괜히 실패한 이미지나 텍스트를 노출해서 좋을 게 없습니다. 때문에 순수하게 시각적인 이유로 사용되는 경우에는 해당 속성을 사용하는 것이 자연스럽습니다.
