인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

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

AirDream님의 프로필 이미지
AirDream

작성한 질문수

CSS Flex와 Grid 제대로 익히기

Flex UI #7 - 카드 리스트

flex UI #7-카드리스트 강의에서

작성

·

147

0

4:34초 쯤에

background-image로 인라인에 넣어주셨는데

한꺼번에 수정하거나 추가 하실때 단축키 어떤걸 해야하나요?

또 메세지 리스트 할때는   figure태그에 background-image를 넣는 것으로 끝냈었는데

카드리스트에는 img태그를 그대로 살려놓으신 이유가 궁금해요.

답변 1

0

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

단축키는 에디터마다 차이가 있을 수 있는데,
제가 사용하는 VSCode에서는 Command(Ctrl) + Alt + F로 한번에 일괄 수정을 할 수 있습니다.

img 태그를 살려둔 이유는,
이미지 자체가 콘텐츠에 중요한 이미지일 경우 내용 구조 자체를 살려두기 위해 넣어둔 것이고요(CSS로만 안보이게 처리),
보통 장식적인 요소로만 쓰인 이미지는 굳이 img 태그를 쓰지는 않습니다.
CSS를 제거했을 경우 HTML 문서가 어떻게 보이는지 형태를 생각해보시면 됩니다.
물론 메시지 리스트에서도 같은 방식으로 img 태그를 살려주셔도 좋은 방법이랍니다.
딱 정답이 있는 문제는 아니라서, 의도를 알고 계시면 될 것 같습니다^^
(애플 웹사이트에서도 종종 배경이미지만 사용하기도 한답니다)

AirDream님의 프로필 이미지
AirDream

작성한 질문수

질문하기