<img> 태그와 background-img CSS 태그

 

 

이미지를 표현하는 두가지 방법으로는,

 

• HTML의 <img src="..." alt="...">로 경로를 연결해서 사용하는 방법
• CSS에서 background-img{url(...)}로 경로를 연결해서 불러오는 방법

있는데, StackOverFlow에서는 간단하게 Foreground = img, Background = CSS Background 라고 정의한 개발자도 있다.

 

 

좀 더 살표보자면 효율적인 면에는 CSS가 외부 파일에 있다면, background image로 불러오는 게 유연성이 있다고 보여지는 데,

 

 

아래 HTML 코드의 경우,

 

<div id="headerImage"></div>

 

CSS는..

 

#headerImage {
	width: 200px;
    height: 100px;
    background: url(Images/headerImage.png) no-repeat;
}

 

그리고 추가적으로 발생된 이벤트에 의해 이미지의 경로가 바뀌였다면 background의 url에 주소만 바꾸어주면 된다. 만약 <img> 태그를 각 HTML 안에서 써야 했다면 src 태그의 속성을 일일히 업데이트 해주어야 하는 번거로움이 있다.

 

 

HTML 태그 / <img>

---

① 프린트가 필요한 경우

: 백그라운드 이미지는 출력시 포함되지 않는다.

 

② 이미지에 문구가 사용되어 의미를 가지는 경우

: 이미지 자체가 어떤 의미를 가지는 경우 이는 alt 태그를 사용해 어떤 이미지에게 알려줄 수 있다.

 

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

 

 

CSS 속성 / background-image

---

① 일정부분만 선택해 보여줄 경우 (ex. hover)

: 간단하게 css를 사용하여 이미지를 다른 것으로 변경 가능

 

② 이미지 위에 텍스트가 들어가는 경우

: 이미지 위에 텍스트가 들어가는 경우에 백그라운드 이미지를 넣고, 태그 내부에 간단히 텍스트를 넣어 사용할 수 있다.

 

③ 페이지 전체 출력시 이미지를 제거해야 하는 경우

: 이미지가 출력되면 곤란한 경우나 겹치는 경우에 해당한다.

 

④ CSS sprites를 사용해 이미지 속도를 향상시키는 경우

: 수 많은 img 태그를 퍼블리싱한 방법보다 CSS sprites 기법을 사용하면 이미지의 수정, 보관, 관리가 용이하고 로딩 속도가 향상된다.

 

⑤ 배경 전체에 확대해 보여줄 필요가 있는 경우

: background-size 등의 속성을 사용해 배경 이미지의 크기를 간단하게 조작 가능

 

⑥ 순수히 디자인을 위해 사용되어질 경우

 

⑦ 이미지가 컨텐츠의 어떠한 영역이 아닐 경우

 

⑧ 아이콘과 같은 반복되는 이미지일 경우

 

 

---

 

 

https://chlolisher.tistory.com/77

태그 VS background-image CSS(백그라운드이미지)는 언제 어떻게 사용하나요?

https://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image

When to use IMG vs. CSS background-image?