CSS로 이미지를 삽입하는 것과 HTML에서 이미지를 삽입하는 것의 차이점이 무엇인가요??
안녕하세요~ 1분 코딩님
이미지를 삽입할 때, 2가지 방법이 있는데요.
"CSS 에서 background 속성으로 이미지를 삽입하는 것"과 "HTML에서 img 태그를 이미지를 삽입하는 방식"
이 2가지 방식을 언제 사용하면 좋다거나, 언제는 사용하면 안 되는 상황이 있나요??
예를 들어,
어느 상황에서는 CSS에 이미지를 집어넣는 게 컨트롤 하기 더 유리한 케이스라든지 혹은 HTML의 img 태그는 중요한 이미지들을 삽입하는 데 쓴다는 등 ...
CSS에서 이미지를 넣는 방식과 HTML에서 이미지를 넣는 방식 구지 2가지 방식을 만들어 놓은 이유가 있을 것같아서 질문드립니다. 감사합니다.
Answer 1
1
기본적으로 <img>로 넣는 것은 그 이미지 자체가 콘텐츠로서 명확한 의미가 있을 때 넣고요,
CSS 배경으로 넣는 경우는 장식적인 요소인 경우 그렇게 한다고 생각해주시면 되는데.. 요즘은 경우에 따라 그 경계가 모호하긴 합니다^^;
예를들어, 피자 레시피를 알려주는 웹페이지를 만든다면, 각 과정에 해당하는 사진 이미지들은 <img>로 직접 넣어주는 게 좋겠지요!
CSS를 제거하고 이 페이지를 보았을 때, HTML 구성 상 필요한 이미지라면 <img>로 넣어주시면 좋습니다.
왼쪽/오른쪽 동작시 딜레이 문제
0
93
1
변수 범위 관련 질문
0
106
1
perspective 문의
0
100
1
생성자 함수를 클래스 함수로 변경 하고 this 오류 관련
0
150
1
스크롤이 중간 위치에 있을 때 창의 크기를 변환하면 생기는 문제
0
126
1
animation이벤트 질문이요!
0
71
1
resize handler에서 질문이 있습니다.
0
110
1
카드 뒤집힐 때 F가 보인 이유
0
149
1
3d 뒤집기 추가효과
0
216
1
전진! 3D 스크롤 21 강의 질문
1
171
1
eventlistener 질문
0
148
1
zMove 를 1000으로 설정하는 이유에 대하여.
0
168
1
[정보-23강] ES6 class 문법으로 공부하시는 분들!! 화살표 함수로도 시도해보셔요!
1
191
1
동적으로 html 생성 후 이벤트 위임 질문 있습니다.
0
265
1
rotateY()에서 deg에 따른 차이
0
196
1
코드 작성 순서
0
275
1
이미지가 없는데 첨부파일을 다운 받는 방법이 있나요??
1
392
1
'이벤트 위임 보강 영상'에 있는 예제 html이 안 보입니다
0
265
2
섹션5 자바스크립트 이벤트 다루기 질문
1
243
1
[#전진! 3D 스크롤 11] mousePos 공식 질문 있습니다!
0
423
2
css 는 직접 작성을 해야하는걸까용?
0
323
1
translateZ 에 px 이 아닌 vw 로 값을 주신 이유가 있을가요?
0
356
2
house 부분에도 width , height 부분을 꽉 차게 주신 부분이 제가 이해한게 맞는지 궁금합니다.
0
302
2
left:-400vw 가 아닌 translateZ(100vw); 을 입력하신 이유가 궁금합니다.
0
303
2