CSS

[CSS] Background-image 의 속성에 대해 파헤쳐보기 Feat. <img>태그와의 차이점

joheamin 2025. 1. 16. 18:11

Css 에서 이미지를 붙일 수 있는 방법이 2가지가 있다.

 

1️⃣ <img> 태그를 이용한 방식

2️⃣ background-image 를 이용한 방식

 

둘 다 똑같이 경로를 통하여 이미지를 불러오는 방식인데

 

두 방식의 차이점은 무엇일까? 알아보자

 

🔶 두 방식의 차이점

▪️img 태그

     - 이미지 로딩이 실패할때 alt를 통해 결과물 출력 가능 

     - 태그 자체가 "이미지"라는 의미를 가지고있어 검색 엔진에 인식되어 노출된다.

  

▪️background-image

    - 이미지를 불러오지 못할때 대체할 무언가가 존재하지않는다.

    - 태그가 아닌 속성이기때문에 "이미지"라는 의미를 갖지 못하여 검색에 노출되지않는다.

     

따라서 각각 어떠한 경우에 사용하면 좋을까 ?

 

 

✔️ <img> 태그 

컨텐츠에 관련이 있는 이미지이며,

검색 하였을때 노출이 되고 웹 페이지의 성능을 높이고 싶을때

 

✔️ background-image

검색 시 노출이 되지않아도 상관없으며,

콘텐츠와도 크게 상관이없고 오로지 디자인 적인 측면에서 활용할때

 

🔶 Background-image 의 속성을 알아보자

우선 속성의 특성을 시각적인 측면에서 확인하기 위해

background-image 속성을 이용하여 웹 브라우저에 이미지를 출력해보겠다.

 

테스트에 활용할 사진은 이 친구이다.

 

주주

 

이미지 적용

 

가로 세로 각각 1000px로 잡았으며

아무런 설정을 하지않은 기본값 상태이다

 

 

 

 

 

 

 

 

 

 

 

 

 

우선 화면 크기를 가득 채우기위해 이미지들이 반복되고있다.

 

난 이미지의 반복을 멈추고싶다.

 

🔸 background-repeat

  • 이미지의 반복을 금지한다.

 

  • repeat-x : 이미지가 수평 방향으로만 반복되도록 한다.

 

  • repeat-y : 이미지가 수직 방향으로만 반복되도록 한다.

🔸 background-position

주어진 영역 내에서 이미지가 어느 위치에 배치될지를 지정하는 속성

 

             Top             Left             Right           Bottom          Center        30% 70%

🔸 background-size

  • cover : 이미지가 잘리더라도 주어진 영역을 전부 채우기위해 이미지를 맟춘다.

 

 

  • contain : 주어진 영역에 여백이 남더라도 이미지 크기 전체를 보이기 위해 맞춘다.