img와 background-image의 차이_CSS

img와 background-image의 차이

이미지를 마크업 하는 두가지 방법으로는

1. <img> 이미지를 전경(foreground) 처리하는 방법

2. <background-image> 스타일시트의 속성을 활용해 배경(background) 처리하는 방법이 있다

전경(foreground)처리가 효과적인 사례

1. 이미지에 구체적인 정보가 담겨있을 때

• img 태그에는 이미지에 포함된 뜻을 설명할 수 있도록 alt 속성을 제공하고 있다.
• 이미지가 어떠한 의미를 가지고 있을 때 alt속성을 통해 대체 콘텐츠 정보를 전달함으로써 웹 접근성을 준수하게 된다

2. 사용자가 등록하는 데이터 이미지일 때

• 사용자가 시스템에서 직접 업로드하는 이미지를 호출해 보여주는 경우, 개발 처리하여 이미지를 서버에서 호출해 노출시킨다.
• css와 무관하게 html 마크업 내에서 바로 데이터를 다룰 수 있어야 한다.

3. 인쇄 시 이미지까지 출력되어야 할 때

• 전경 처리된 이미지는 따로 브라우저 인쇄모드 옵션을 변경하지 않아도 기본적으로 이미지까지 모두 인쇄된다.
• 배경 이미지는 인쇄 기본 옵션에서 출력되지 않도록 되어있다.
• 따라서 꼭 인쇄되어야하는 주요 정보라면 전경 이미지로 마크업 해야한다.

4. 이미지의 크기가 레이아웃에 영향을 미칠 때

• 사진 크기에 따라 다른 요소의 위치가 유기적으로 배치되는 사례의 경우 이미지 교체시에 레이아웃이 유기적으로 함께 변경되어야 하므로 이미지의 사이즈를 지정하지 않고 변경되는 이미지의 사이즈를 이용하기 위해
  (ex. 기사본문)

5. 검색엔진에 이미지까지 노출이 필요할 때, 이미지검색 SEO

• 이미지의 파일 이름과 대체 텍스트를 최적화하면 구글 이미지와 같은 이미지 검색에서 검색될 수 있다.

배경(background)처리가 효과적인 사례

1. 꾸밈(디자인) 요소로만 사용할 때

• background-image는 말 그대로 배경이다.
• 콘텐츠로서의 의미 없이 단지 꾸밈 요소로써 존재할 때 주로 사용하게 된다.
• 목록 앞에 사용되는 불릿 아이콘이나, 비주얼 요소를 강조하기 위해 사용하는 배경 사진등이 해당된다
• 콘텐츠와 직접적인 관계가 없으므로 이미지가 로딩되지 않더라도 콘텐츠를 이해하는데 있어 영향을 미치지 않는다

2. 성능 향상을 위해, IR 기법 & Sprite 기법

• 시멘틱한 마크업을 위해 용도에 맞게 태그를 쓰는 것은 중요하지만, 스타일시트를 활용해 개발의 효율성을 높이면서도 접근성을 저해하지 않는 대체 방법(*IR기법)도 존재한다

3. 개발 생산성과 유지보수 효율 향상을 위해, 아이콘 시스템

• 콘텐츠 분량이 많은 대형 프로젝트에서는 여러명의 디자이너와 마크업 개발자가 협업하기 때문에 한번 사용한 이미지를 재사용할 수 있도록 디자인시스템을 구축한다.일명 규격화, 컴포넌트화 하게된다
• 이미지로 처리하면 추후 이미지를 교체해야하는 사황이 닥쳤을때, 파일명이나 경로가 변경되면 html마크업을 함께 수정해야하기 때문에 유지보수 효율성이 떨어진다. 하지만 아이콘을 배경이미지로 처리한다면 마크업을 수정하지 않고 css만으로 컨트롤할 수 있게 된다
• 따라서 시스템화된 아이콘은 배경처리 하는 것이 유지보수에 보다 유리하다

4. 인쇄 시 이미지는 출력되지 않기를 원할 때

• 인쇄모드에서는 보편적으로 프린터의 잉크를 절약하기 위해 필수적인 콘텐츠로만 화면을 구성하기를 권장한다. 때문에 대부분의 브라우저 인쇄 옵션에서 배경 이미지를 출력하지 않도록 기본 설정되어있다. 출력할 필요 없는 꾸밈 용도의 이미지이거나, 배경이미지가 주요 콘텐츠와 겹쳐 시인성을 저해한다면 백그라운드를 사용하는게 도움이 된다

*IR기법

IR기법이란,이미지의 대체 텍스트를 제공하기 위한 css기법으로 다양한 css기법을 사용하며 이미지의 대체 텍스트를 제공하는 방법이다.

• 여러가지 기법 중에서 Phark Method, WA IR, Screen out기법을 주로 사용한다

Phark Method

이미 있는 이미지의 대체 텍스트를 제공하는 경우로, 텍스트를 text-indent:-9999px를 이용하여 바깥으로 빼내어 보이지 않게 하는 방법

phark-method {
  display: block; 
  overflow: hidden; 
  font-size: 0; 
  line-height: 0; 
  text-indent: -9999px;
}

WA IR

의미 있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때 사용하는 방법으로 z-index:-1을 이용하여 화면에 보이지 않게 처리하는 방법

.wa-ir {
  display: block; 
  overflow: hidden; 
  position: relative; 
  z-index: -1; 
  width: 100%; 
  height: 100%;
}

Screen out

대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 사용하는 방법

.screen-out {
  overflow: hidden; 
  position: absolute; 
  width: 0; 
  height: 0; 
  line-height: 0; 
  text-indent: -9999px;
}