자식 요소의 width를 %에서 px로 변경하는 이유

Question

강사님 안녕하세요. 10:09 부분 질문 드립니다. 강사님께서 .class-image의 width를 100%에서 240px로 변경하셨고, %로 놔두면 여러 요소가 추가됨에 따라 카드 사이즈가 줄어들면서 최대한 많은 요소를 보여주려고 한다고 하셨습니다. 제가 이 부분이 조금 헷갈리는데, 요소를 배치하기 위해 사이즈를 조정하는 flex의 특성 때문에 그런 것인가요? 저는 width가 100%이면 부모 요소인 .class-card의 240px에 맞춰진다고 생각했는데, 생각해보면 .class-card도 240px로 설정했지만 사이즈가 변형되는게 조금 이해하기 어렵고 정확한 이유가 궁금합니다!

잔재미코딩 DaveLee · Answer

안녕하세요. ul 과 같이 쓰이는 li 에 class-card 를 넣은 것인데요. class-card 는 결국 class-list, roadmap-container 를 거쳐서(이 둘은 width 가 100% 이지만), inner 에 media 설정으로 화면 사이즈에 따라 고정된 사이즈를 가지게 됩니다. 그리고 그 안에, flex 로 설정되었을 때, 별도 설정을 안했기 때문에, 디폴트로 한줄에 모든 요소가 표현되게끔 설정이 된 상태입니다. 예를 들어, flex-wrap 이 wrap 이면, flex 아이템이 flex 컨테이너 안에서 표시되도록, 줄 바꿈할 수도 있지만, 그런 설정이 안되어 있으면 nowrap 이라서, 한줄에 표시하게 됩니다. 그러다보니, 카드가 늘어나면, 한줄에 이를 모두 표시해야 해서, 사이즈가 줄어들게 되고요. 저희는 이런 부분을 overflow 설정을 통해, 넘쳐나는 부분은 안보이게끔만 할 것이기 때문에, 각 class-card 사이즈가 카드 갯수만큼 줄어들지 않도록, 고정 사이즈로 변경한 것이라고 보시면 좋을 것 같습니다. 감사합니다.