[CSS 기초] img태그와 background-image 차이

 

안녕하세요 PNcoding입니다 :)

 

오늘은 img 태그와 background-image의 차이에 대하여 알아보도록 하겠습니다.

 

 

img태그나 배경이미지 관련해서 궁금하신 분들은 아래 포스팅을 참고해 주시면 되겠습니다 :)

 

https://pncoding.tistory.com/13

[HTML 기초] HTML 태그 종류 (2) - img 태그, a 태그

https://pncoding.tistory.com/18

[CSS 기초] css 배경 속성

 

 

---

 

웹페이지에 이미지를 올리는 방법은 두 가지 방법이 있습니다.

 

첫 번째로 img태그를 이용하는 방법, 두 번째는 background-image를 이용하는 방법이 있습니다.

그렇다면 이 두 가지를 사용하는 데 있어서의 차이점은 무엇인지 한번 알아보도록 하겠습니다.

 

 

 

img 태그

1. HTML에서 사용

 

2. 이미지에 구체적인 정보를 담을 때 사용

img 태그에는 alt라는 속성 안에 이미지에 대한 대체텍스트를 넣어주어 이미지가 로딩되지 않더라도 이미지의 정보를 받을 수 있습니다.

아래의 이미지는 왼쪽은 이미지의 경로가 제대로 잡혔을 때, 오른쪽은 이미지의 경로가 제대로 잡히지 않아 이미지가 로딩이 되지 않았을 때 alt안의 내용이 브라우저에 출력됐을 때를 보여줍니다.

<img src="../logo.png" alt="피엔코딩 로고" /> 
<img src="" alt="피엔코딩 로고" />

 

3. 검색 시 이미지가 노출되고 싶을 때 사용

img 태그로 이미지를 넣게 된다면 검색엔진(ex. 구글, 네이버 등)에서 검색했을 시 이미지가 검색이 되도록 만들어 줄 수 있습니다.

구글에 피엔코딩을 검색했을시 나오는 이미지들

 

4. 인쇄 시 이미지가 출력되어야 할 때 사용

img 태그로 이미지를 넣게 된다면 이미지까지 모두 인쇄되게 만들어 줄 수 있습니다. 따라서 반드시 인쇄되어야 하는 이미지라면 반드시 img 태그로 넣어주시면 되겠습니다.

 

5. 이미지가 중요할 경우

이미지가 그냥 디자인 요소로 사용되는 것이 아니라 웹페이지의 중요한 콘텐츠와 관련이 있을 경우 img 태그로 넣어주는 것이 좋습니다.

 

 

 

반응형

 

 

background-image

1. CSS에서 사용

 

2. 디자인적인 요소로만 활용할 경우

말 그대로 background-image 이기 때문에 배경적인 요소로만 활용을 하고 싶을 때 넣어줍니다.

즉 콘텐츠와 관련이 없는 배경적인 요소로만 활용할 경우 넣어줍니다.

 

3. 인쇄 시 이미지를 포함하고 싶지 않을 때

img 태그와 다르게 배경이미지로 넣어주게 되면 프린트 시 이미지가 출력되지 않습니다.

 

4. 여러 개의 작은 이미지를 사용하는 경우

아이콘 같이 여러 개의 작은 이미지를 사용해야 하는 경우 이미지를 하나로 만들어주어 파일을 불러오는 횟수를 줄여주어 다운로드 시간을 개선해 줄 수 있습니다.

 

5. 이미지 위에 텍스트가 올라가는 경우

이미지 위에 텍스트가 올라가는 경우 배경이미지의 중요도가 그리 높지 않을 때 사용합니다.

 

6. 배경 전체에 확대해서 보여줄 필요가 있을 경우

background-size 속성 및 background-position 속성으로 배경이미지의 크기나 위치를 간단하게 조절해 줄 수 있습니다.

 

 

 

---

 

두 방법 모두 사용하는 데 있어서 상황에 맞게 활용하시면 효율적으로 웹사이트를 구성하실 수 있을 거예요.

 

어떤 상황이냐에 따라 두 가지 방법 중 하나를 선택하여 작업하시면 되겠습니다 :)