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

Woo-seok Choi님의 프로필 이미지

작성한 질문수

[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

12.13) New 페이지 구현하기 1. UI

강의 12.13 마지막에 flex 스타일 관련 질문

해결된 질문

24.08.06 02:25 작성

·

78

1

강의 12.13 마지막에서 메인컨테이너가 화면 끝까지 안내려 오는 문제를 해결하기 위해서 index.css의 body 태그 스타일에 flex 를 주셔서 해결하셨는데요. 그 원리를 조금 더 설명해 주실 수 있나요?

flex는 요소들을 한줄에 배치하기 위해서 사용 하는데 여기선 요소가 다음 줄 까지 덮도록 쓰여진것 같아 좀 헷갈립니다.

답변 1

0

이정환 Winterlood님의 프로필 이미지
이정환 Winterlood
지식공유자

2024. 08. 06. 21:39

안녕하세요 이정환입니다.

display가 flex로 설정된 요소는 자신의 자식 요소들을 모두 둘러싸도록 크기가 자동으로 조정됩니다.

따라서 body 태그의 flex를 설정하게 되면 body 태그의 자식 요소인 메인 컨테이너의 크기 만큼 body 태그의 높이가 늘어나게 되어 문제가 해결되는 원리입니다.