웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
ENG
HOME
>
webdevetc
img 태그 vs 백그라운드 이미지 언제 어떻게 사용해야 하는가
Last Modified : 2016-05-02 /
Created : 2015-01-15
8,327
View Count
주소 복사하기
페이지 공유하기
웹사이트를 퍼블리싱 하면서 이미지 태그를 사용하는 것과 백그라운드로 사용하는 것중 어떤 방법이 더 나을지 고민하게 됩니다... 어떤 경우에 어떤 방법을 사용하는게 더 효과적인지 알아보도록 하겠습니다.
# img 태그의 사용하는게 좋은 경우
1. 프린트가 필요한 경우
; 백그라운드 이미지는 출력시 포함되지 않습니다.
2. 이미지에 문구가 사용되어 의미를 가지는 경우
; 이미지 자체가 어떤 의미가 있는 경우 이는 alt 태그를 사용해 어떤 이미지인지 알려줄 수 있습니다. 백그라운드 이미지는 alt 태그가 없습니다.
3. 이미지가 콘텐츠의 중심으로 가장 중요한 경우
# 백그라운드 이미지를 사용하는게 좋은 경우
1. 일정부분만 선택해 보여줄 경우(예 - 호버 버튼)
; 간단하게 css를 사용하여 이미지를 다른 것으로 손 쉽게 변경할 수 있죠
2. 이미지 위에 텍스트가 들어가는 경우
; 이미지 위에 텍스트가 들어가는 경우 간단하게 텍스트 태그 안에 백그라운드를 넣는 방법을 사용할 수 있습니다.
3. 페이지 전체 출력시 이미지를 제거해야 되는 경우
; 이미지가 출력되면 곤란한 경우거나 겹치는 경우에 해당합니다.
4. CSS sprites를 사용해 이미지 속도를 향상시킬 경우
; 다수의 img 태그를 통한 방법보다 CSS sprites 기법을 사용하면 이미지의 수정, 보관, 관리가 용이하고 미리 다른 아이콘 영역도 읽어들여 로딩 속도도 향상할 수 있습니다.
5. 배경 전체에 확대해 보여줄 필요가 있는 경우
; background-size 등의 속성을 사용해 배경 이미지의 크기를 간단하게 조작 가능합니다.
이미지 태그
백그라운드
img
아래의 글도 찾고 계시지 않나요?
자바스크립트 Canvas에 백그라운드 배경을 추가하는 방법
[React] img 태그의 이미지를 추가하는 방법 및 예제 알아보기
웹워커(Web Worker) 사용 및 사용하기 좋은 부분은?
크롬 input 태그등에 자동생성 백그라운드 색 제거하는 방법
제이쿼리 css() 에서 background-image 안되는 경우
[CSS] background-blend-mode 이미지와 배경색 혼합하기
파이어폭스 firefox에서 background-position 속성 적용 안될 경우
[자바스크립트] 백그라운드(background) 경로, 주소 불러오기, getComputedStyle()
Previous
[CSS/JS] 스타일 또는 스크립트의 파일명 뒤에 파라미터를 붙이는 이유
Previous
카페24 FTP 2.0 베타 다운로드