이미지를 넣을 때 div 안에 background-img를 넣으시는이유
431
작성한 질문수 4
저는 어떤 이미지를 넣을 때 바로 img 태그를 이용해 넣을거같은데 강사님은 항상 div 태그 안에 background-img를 넣으시더라구요 혹시 그렇게 하시는 이유가 따로 있으신가요? 궁금합니닷!
답변 2
0
예전부터 IE를 포함한 여러 브라우저에서 이미지 크기를 맞출 때, 그냥 <img>를 사용하는 것 보다 배경이미지를 사용하는게 수월해서 그렇게 하곤 했는데요, IE는 고려하지 않아도 되는 현재 시점이라면 aspect-ratio같은 최신 CSS 속성으로 쉽게 이미지 비율을 조정할 수 있기 때문에, 그냥 img를 사용하셔도 괜찮으실 거예요. 이미지 위치의 미세한 조정, 이미지 크롭 등 이리저리 컨트롤하기는 여전히 CSS 배경이미지를 사용하는 편이 더 강력하긴 하답니다. 용도에 맞춰서 적절히 사용하시면 될 것 같아요^^
0
안녕하세요, 인프런 AI인턴이에요.
일반적으로 이미지를 넣을 때는 img 태그를 이용해 넣는 것이 일반적입니다. 하지만 때로는 이미지를 div 태그에 배경 이미지로 삽입하는 경우도 있습니다.
배경 이미지로 사용할 때는 보통 다음과 같은 경우에 사용됩니다.
- 이미지가 박스 안에 꽉 차게 위치하도록 하기 위해서
- 이미지의 크기를 조절하는 등 스타일링을 더 유연하게 할 수 있기 때문에
- 웹 페이지가 초기 로딩 시간을 단축시키기 위해서(이미지 로딩은 비동기적으로 처리되기 때문에 페이지 초기 로딩 시간을 단축할 수 있습니다.)
그러나 이 방법도 장단점이 있기 때문에, img 태그와 함께 사용하는 것도 좋은 방법입니다.
이차진담으로, 개인적으로는 이미지를 배경으로 넣는 것보다는 img 태그를 사용하는 것을 권장드립니다. 위에서 언급한 몇몇 이유때문에 좀 더 성능면에서 이점을 볼 수 있기 때문입니다.
감사합니다.
왼쪽/오른쪽 동작시 딜레이 문제
0
94
1
변수 범위 관련 질문
0
106
1
perspective 문의
0
103
1
생성자 함수를 클래스 함수로 변경 하고 this 오류 관련
0
150
1
스크롤이 중간 위치에 있을 때 창의 크기를 변환하면 생기는 문제
0
127
1
animation이벤트 질문이요!
0
72
1
resize handler에서 질문이 있습니다.
0
111
1
카드 뒤집힐 때 F가 보인 이유
0
149
1
3d 뒤집기 추가효과
0
219
1
전진! 3D 스크롤 21 강의 질문
1
171
1
eventlistener 질문
0
149
1
zMove 를 1000으로 설정하는 이유에 대하여.
0
169
1
[정보-23강] ES6 class 문법으로 공부하시는 분들!! 화살표 함수로도 시도해보셔요!
1
191
1
동적으로 html 생성 후 이벤트 위임 질문 있습니다.
0
267
1
rotateY()에서 deg에 따른 차이
0
197
1
코드 작성 순서
0
276
1
이미지가 없는데 첨부파일을 다운 받는 방법이 있나요??
1
394
1
'이벤트 위임 보강 영상'에 있는 예제 html이 안 보입니다
0
265
2
섹션5 자바스크립트 이벤트 다루기 질문
1
243
1
[#전진! 3D 스크롤 11] mousePos 공식 질문 있습니다!
0
423
2
css 는 직접 작성을 해야하는걸까용?
0
326
1
translateZ 에 px 이 아닌 vw 로 값을 주신 이유가 있을가요?
0
363
2
house 부분에도 width , height 부분을 꽉 차게 주신 부분이 제가 이해한게 맞는지 궁금합니다.
0
306
2
left:-400vw 가 아닌 translateZ(100vw); 을 입력하신 이유가 궁금합니다.
0
308
2