inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

CSS Flex와 Grid 제대로 익히기

Flex UI #7 - 카드 리스트

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

168

AirDream

작성한 질문수 40

0

4:34초 쯤에

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

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

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

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

flex HTML/CSS

답변 1

0

1분코딩

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

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

가로스크롤 과 margin: 0 -1rem 질문 있습니다

0

118

1

수업자료 다운로드

0

122

1

VS코드에 클래스 이름만 넣으셨는데 선생님이 뭘 누르면 바로 태그로 변하던데...

1

137

1

css grid repeat() 에서 autofit 사용시

0

182

1

menu 아이템 반응형 변경

0

102

1

질문은 아니고.. 오타 발견..

0

120

1

웹에서 위치?값

0

211

1

px, em ,rem을 어떻게 감각적으로 쓸 수 있을까요?

0

510

2

강의에 나오는 html 자동으로 만들어주는 편집기에 대해 알 수 있을까요?

0

309

1

flex-basis auto, 0 차이

0

709

2

padding 대신 gap을 쓰는게 더 편하지 않나요?

2

607

1

animation forwards 관련 질문

0

488

2

auto-fill, auto-fill이 적용되지 않는것 에 대해 질문드립니다.

0

559

1

flex-grow IE 질문드립니다.

0

624

2

Flex-grow가 적용되는 영역에 대해 질문드립니다.

0

437

1

Grid 수직정렬 문의

0

1075

1

card__item에 display:flex를 했을 때..

0

512

1

11vmin

0

417

1

header class 안에 div와 h2

0

576

1

grid 반응형 페이지 step1 질문있습니다~

0

282

1

반응형 페이지 step4 order

0

356

1

미디어쿼리 사이즈

1

286

1

figure + div

0

300

1

CSS Grid를 통한 정렬의 장점

0

247

1