선생님 css background에 대한 질문입니다.
선생님 움직이는 이벤트 예제에서요
image를 삽입할때 img src tag를 사용하지 않고
css에서
background-image: url();
을 사용하는 걸까요??
답변 3
1
아- 실수로 그러신거라면 다행입니다^^ 저는 강의에서 뭔가 부족한게 있었나 생각했어요~ㅎㅎ
(수강평은 수정하실 때 별 부분을 클릭하면 별점도 수정이 되거든요~ 혹시 시간 되실때 수정해주실 수 있으면 수정 부탁드릴게요 하핫^^;)
1
CSS 백그라운드로 넣으면 해당 클래스의 CSS만 수정하면 이미지를 바꿀 수 있는 점이 좋고,
이미지의 크기 조정이 아주 수월해지기때문에 백그라운드 이미지를 자주 사용해요.
background-size: cover나 background-size: contain같은 동작을 img 태그를 이용해 만들려고 하면 아주 귀찮은 작업을 해야하거든요~
그렇다고 언제나 백그라운드 이미지를 사용하는 것은 아니고요, 내용상 중요한 이미지라면 img 태그로 넣어주시고, 장식적인 요소라면 백그라운드 이미지로 해주시고. 그렇게 해주시면 좋습니다.
아니면 아래처럼 둘 다 적용 후에, CSS로 img는 display: none 처리 해서 안보이게 하는 방법도 있고요^^
html <figure class="my-image" style="background-image: ..."><img src="..."></figure>
css .my-image img { display: none; }
(아참 ss S님, 강의 수강평 내용은 아주 좋게 써주셨는데..별점을 2개를 주셨더라고요^^;; 혹시 강의에 부족한 점 느끼신게 있을까요? 알려주시면 다음 강의를 만들 때 개선할 수 있는 점이라면 개선 해보도록 하려고요^^)
0
선생님 답변 감사합니다.
저는 background는 노란색 배경인데 왜 image를 넣으면서 그게 background가 되는가하고 생각했어요. css로 image를 control하면 장점이 있다로 이해하고 좀 더 공부를 열심히 해봐야 겠습니다.
그리고 선생님 강의 덕분에 정말 재밌게 공부 잘 하고 있는데 제가 별점을 왜 그렇게 했는지 도무지 기억이 나질 않습니다ㅠ 지금도 별 100개 드리려고 한참을 찾아봤는데 어디서 제가 그 짓을 한 것인지 도저히 못 찾겠어요 죄송합니다
왼쪽/오른쪽 동작시 딜레이 문제
0
93
1
변수 범위 관련 질문
0
106
1
perspective 문의
0
100
1
생성자 함수를 클래스 함수로 변경 하고 this 오류 관련
0
150
1
스크롤이 중간 위치에 있을 때 창의 크기를 변환하면 생기는 문제
0
127
1
animation이벤트 질문이요!
0
71
1
resize handler에서 질문이 있습니다.
0
110
1
카드 뒤집힐 때 F가 보인 이유
0
149
1
3d 뒤집기 추가효과
0
217
1
전진! 3D 스크롤 21 강의 질문
1
171
1
eventlistener 질문
0
149
1
zMove 를 1000으로 설정하는 이유에 대하여.
0
168
1
[정보-23강] ES6 class 문법으로 공부하시는 분들!! 화살표 함수로도 시도해보셔요!
1
191
1
동적으로 html 생성 후 이벤트 위임 질문 있습니다.
0
265
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
360
2
house 부분에도 width , height 부분을 꽉 차게 주신 부분이 제가 이해한게 맞는지 궁금합니다.
0
305
2
left:-400vw 가 아닌 translateZ(100vw); 을 입력하신 이유가 궁금합니다.
0
306
2