12.13) 마지막 부분, body의 display 속성

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

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

해결된 질문

작성

168

12.13) New Page 구현하기 1. UI 강좌 마지막에 흰색 배경이 화면 아래까지 감싸지 않아서 강사님께서 display속성을 수정하셨는데요.

body의 display속성을 개발자도구로 살펴보면 display:block 으로 되어있고 display:flex 로 바꿨을 때 왜 문제가 해결됐는지 모르겠습니다.

display:block은 full width만 지킬뿐 full height는 지키지 않아서 아래가 비어있음-> margin방향으로 팽창을 위해 flex를 사용?

flex가 컨테이너 내부의 elements를 정렬/조작해주는건 알고 있었는데 flex를 적용한 컨테이너 자체 크기가 변하는 기능이 있나요?

답변 1

지식공유자

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

flex-container는 기본적으로 width와 height를 고정적으로 설정하지 않을 경우

모든 item을 포함할 수 있도록 유동적으로 그 크기가 늘어나게 됩니다.

따라서 body 태그에 flex 속성을 적용하게 될 경우 세로로 늘어나는 아이템들도 다 포함하기 위해

body 태그 자체의 크기가 늘어나게됩니다.

질문자

CSS 관련 질문이라 질문드릴까말까 고민했는데 답변주셔서 감사합니다!

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