[CSS] 마크업(markup)할 때, img vs background-image 선택하는 기준은?

background-image와 img는 모두 이미지를 웹 페이지에 표시하는 데 사용되는 요소들이지만, 사용되는 목적에 따라 다르게 활용됩니다.

마크업(markup)할 때, img vs background-image 선택하는 기준에 대해서 알아봅시다.

img

img는 주로 콘텐츠 내에 이미지를 전경으로 표시하는 데 사용됩니다. 주로 콘텐츠의 중요한 부분으로 사용되며, HTML 코드 내에 <img> 태그를 사용합니다.

 

이미지 처리가 서버에서 호출되어 개발 처리가 돼야 하는 경우 img 태그를 권장합니다.

<img> 태그는 srcset 속성을 통해 다양한 해상도의 이미지를 제공하고, 브라우저가 적절한 이미지를 선택할 수 있도록 합니다.

<img src="small.jpg" 
     srcset="medium.jpg 1000w, large.jpg 2000w" 
     sizes="(max-width: 600px) 100vw, (max-width: 1000px) 50vw, 33vw"
 alt="대체 텍스트">

 

img 요소는 대체 텍스트(alt 속성)를 제공할 수 있기 때문에 시각적으로 콘텐츠를 이해할 수 없는 사용자에게도 적절한 설명을 제공할 수 있어 더 나은 접근성을 제공합니다.

<img src="./images/img001.jpg" alt="대체 텍스트">

 

 

 

 

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

 

 

 

 

background-image

background-image는 주로 요소의 배경에 이미지를 표시하는 데 사용됩니다.

주로 불릿(bullet) 같은 특정 디자인 요소나 콘텐츠의 일부가 아닌 장식적인 배경에 적용됩니다.

스타일 시트(CSS)에서 background-image 속성을 활용하여 처리합니다.

.imgBox {
  width: 100%;
  height: 300px;
  background: url(../images/bg_img001.jpg) no-repeat 0 0;
  background-size: cover;
}

 

미디어 쿼리를 사용하여 특정 뷰포트 크기에 대한 스타일을 지정할 수 있습니다. srcset 속성과 비슷한 방식으로 사용할 수 있습니다.

.imgBox {
    background-image: url('./images/large.jpg');
}

@media and (max-width: 768px) {
    .imgBox {
        background-image: url('./images/small.jpg');
    }
}

 

background-image는 이미지에 대한 대체 텍스트를 직접 제공하지 않기 때문에, 시각적인 콘텐츠를 이해할 수 없는 사용자에게는 추가적인 대체 수단을 제공해야 합니다.

 

background-image에 대체 텍스트 처리 방법

- 요소 내에 실제 텍스트를 감추고, 스크린 리더에게만 표시할 수 있도록 할 수 있습니다.
아래의 코드를 참고해 보세요.

<div class="imgBox">
    <span class="a11yHidden">대체 텍스트</span>
</div>

.imgBox {
  width: 100%;
  height: 300px;
  background: url(../images/bg_img001.jpg) no-repeat 0 0;
  background-size: cover;
  
  .a11yHidden {
    overflow: hidden;
    position: absolute;
    clip: rect(0, 0, 0, 0);
    clip-path: circle(0);
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
  }
}

 

- 또, aria-label 속성을 사용하여 대체 텍스트를 제공할 수 있습니다.

<div class="allyHidden" aria-label="대체 텍스트"></div>

 

- 그 밖에 CSS 가상 연산자의 content로 대체 텍스트를 추가하는 방법입니다.

::before 또는 ::after 가상 요소를 사용하여 CSS로 텍스트를 추가할 수 있습니다. 일부 스크린 리더기에서 읽히지 않는 이슈가 있어서 지양하는 방법입니다. 참고만 해주세요.

 

 

 

 

 

 

이러한 기준을 고려하여 적절한 방식으로 이미지를 마크업 하면 웹 페이지의 구조를 더욱 명확하게 만들고, 접근성과 검색 엔진 최적화 (SEO)를 향상할 수 있습니다. 이렇게 마크업(markup)할 때, img vs background-image 선택하는 기준에 대해서 알아보았습니다.

 

[Utility] Jump Desktop을 활용한 원격 접속 : 어디서든 컴퓨터를 제어하세요!

 

[Safari] 웹접근성 향상을 위한 Tab 키 하이라이트 표시 설정 방법

 

[git] Github Desktop으로 아주 쉽게 저장소(repository)를 로컬에 클론(clone)하기

 

[Javascript] 다양한 방법으로 요소의 높이값 구하기, clientHeight, offsetHeight, scrollHeight, getBoundingClientRe

 

 

[CSS] 반응형 웹페이지, object-fit 속성으로 미디어 컨텐츠를 완벽히 제어하기