img태그 vs background이미지

김현우·2020년 7월 21일
1
post-thumbnail

img태그와 background이미지에 앞서 Semantic Web과 Tag에 대하여 알아보자.

Semantic Web이란?

웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’ 을 가지는 거대한 데이터베이스로 구축하고자 하는 발상

Semantic Tags이란?

Sementic Web을 구현하기 위한 의미를 가진 태그들

HTML 태그는 non-semantic 요소, semantic 요소로 구분

non-semantic 요소

div, span 등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않는다.

semantic 요소

form, table, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명한다.

tagDescription
header헤더를 의미
nav내비게이션을 의미
aside사이드에 위치하는 공간을 의미
section본문의 여러 내용(article)을 포함하는 공간을 의미
article분문의 주내용이 들어가는 공간을 의미
footer푸터를 의미

주요 Semantic요소에 대해 살펴보자!

<header>와 <footer> 문서의 부가정보를 표기하는 데 사용
<header>에 문서의 제목, 로고, 작성자, 작성일과 같은 메타 정보를 배치<footer>에는 회사 정보나 소유자의 소셜미디어 정보, 약관 등 문서와 관련이 적은 부가정보를 배치

2.<nav>

내비게이터(navigator)를 의미한다. 사이트 전체 흐름을 제어하는 기능을 담당
주로 주요 메뉴가 배치됨
전체 페이지의 흐름을 담당해 문서의 변화와 상관없이 항상 노출됨.

3.<main>과 <article>과 <section>

세 가지 태그는 본문 영역을 구획할 때 주로 사용
<main>은 문서에서 오직 한 번만 사용하며 콘텐츠 내용 전체 감쌈. <article>은 내용으로 나누고, <section>은 형식으로 나눔. 하나의 <article> 안에 여러 개의 <section>이 있을 수 있고,
반대의 경우도 가능!

4.<aside>

본문 옆에 구성. 본문과 직접적으로 관련 없는 내용이 배치되며 측면의 카테고리 목록이나 태그 목록 등이 포함된 영역들이 주로 많음

Semantic Tag의 중요성

  1. 웹 접근성
    많은 홈페이지들이 <div><span>만으로 웹페이지를 구성.
    웹페이지에 일반적인 방법으로 접근할 수 없는 사람들에게 편리함을 줌.

  2. SEO(검색엔진 최적화)
    관련 키워드로 검색했을 때 검색 결과 상위에 문서를 노출하려면 SEO 최적화는 필수.
    <div><span>만 사용한 문서는 어떤 부분이 중요한 영역인지 구분이 어렵다.
    의미론적으로 중요한 부분과 덜 중요한 부분을 파악할 수 있게 해주어 효율적인 검색 가능.

img 태그의 사용하는게 좋은 경우

  1. 프린트가 필요한 경우
    -백그라운드 이미지는 출력시 포함되지 않습니다.

  2. 이미지에 문구가 사용되어 의미를 가지는 경우
    -이미지 자체가 어떤 의미가 있는 경우 이는 alt 태그를 사용해 어떤 이미지인지 알려줄 수 있습니다. 백그라운드 이미지는 alt 태그가 없습니다.

  3. 이미지가 콘텐츠의 중심으로 가장 중요한 경우


백그라운드 이미지를 사용하는게 좋은 경우

  1. 일정부분만 선택해 보여줄 경우(예 - hover버튼)
    -간단하게 css를 사용하여 이미지를 다른 것으로 손 쉽게 변경할 수 있습니다.

  2. 이미지 위에 텍스트가 들어가는 경우
    -이미지 위에 텍스트가 들어가는 경우 간단하게 텍스트 태그 안에 백그라운드를 넣는 방법을 사용할 수 있습니다.

  3. 페이지 전체 출력시 이미지를 제거해야 되는 경우
    -이미지가 출력되면 곤란한 경우거나 겹치는 경우에 해당합니다.

  4. CSS sprites를 사용해 이미지 속도를 향상시킬 경우
    -다수의 img 태그를 통한 방법보다 CSS sprites 기법을 사용하면 이미지의 수정, 보관, 관리가 용이하고 미리 다른 아이콘 영역도 읽어들여 로딩 속도도 향상할 수 있습니다.

  5. 배경 전체에 확대해 보여줄 필요가 있는 경우
    -background-size 등의 속성을 사용해 배경 이미지의 크기를 간단하게 조작 가능합니다.


즉, 결론적으로

<img>태그는 alt 태그를 사용하여 어떠한 이미지인지 설명해 줄 수 있는 의미가 부여된 태그이므로 Semantic Tag의 일종으로 볼 수 있다.

하지만, background img인 경우는 따로 설명이 없으며 그냥 순수 이미지만 나타내므로 순수 장식 이미지 배경으로 사용하는 경우가 아니면 웬만하면 <img>태그 사용을 권장한다.

<background img의 단점>

CSS background-image 속성에 있는 이미지는 Google 봇이 크롤링하거나 색인하지 않음.

CSS background-image 속성은 접근성에 적합하지 않습니다. Screen readers는 background-image를 완전히 무시함.

일반적으로 디바이스 화면 너비나 해상도에 관계없이 background-image 속성에 하나의 이미지만 사용되기 때문에 성능에 좋지 않다.

profile
코딩을 잘하는 개발자가 되자!

0개의 댓글