인프런 커뮤니티 질문&답변

ss S님의 프로필 이미지
ss S

작성한 질문수

인터랙티브 웹 개발 제대로 시작하기

움직이는 캐릭터 예제로 클릭 이벤트 익혀보기

선생님 css background에 대한 질문입니다.

해결된 질문

작성

·

188

0

선생님 움직이는 이벤트 예제에서요

image를 삽입할때 img src tag를 사용하지 않고 

css에서 

background-image: url();

을 사용하는 걸까요??

답변 3

1

1분코딩님의 프로필 이미지
1분코딩
지식공유자

아- 실수로 그러신거라면 다행입니다^^ 저는 강의에서 뭔가 부족한게 있었나 생각했어요~ㅎㅎ
(수강평은 수정하실 때 별 부분을 클릭하면 별점도 수정이 되거든요~ 혹시 시간 되실때 수정해주실 수 있으면 수정 부탁드릴게요 하핫^^;)

1

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

ss S님의 프로필 이미지
ss S
질문자

선생님 답변 감사합니다. 
저는 background는 노란색 배경인데 왜 image를 넣으면서 그게 background가 되는가하고 생각했어요. css로 image를 control하면 장점이 있다로 이해하고 좀 더 공부를 열심히 해봐야 겠습니다. 
그리고 선생님 강의 덕분에 정말 재밌게 공부 잘 하고 있는데 제가 별점을 왜 그렇게 했는지 도무지 기억이 나질 않습니다ㅠ 지금도 별 100개 드리려고 한참을 찾아봤는데 어디서 제가 그 짓을 한 것인지 도저히 못 찾겠어요 죄송합니다

ss S님의 프로필 이미지
ss S

작성한 질문수

질문하기