12.13 new 페이지 구현하기 1.UI 부분에서 마지막 설명부분이 이해가 가지 않습니다

Question

마지막에서 작성완료와 취소하기 버튼 부분에 배경색 하얀색 부분 즉 #root background-color:white부분이 적용되지 않았습니다. 이때 해결방법을 body에 display:flex를 넣음으로써 해결이 된다하셨는데, 이게 root부분에 어떤 영향을 끼치길래 height가 늘어났는지 궁금합니다

이정환 Winterlood · Answer

안녕하세요 이정환입니다. flex-container는 기본적으로 width와 height를 고정적으로 설정하지 않을 경우 모든 item을 포함할 수 있도록 유동적으로 그 크기가 늘어나게 됩니다. 따라서 body 태그에 flex 속성을 적용하게 될 경우 세로로 늘어나는 아이템들도 다 포함하기 위해 body 태그 자체의 크기가 늘어나게됩니다.

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 남기정님. 질문 주신 내용을 참고하여 몇 가지 설명을 드리고, 관련 질문 및 답변 링크를 함께 안내해드리겠습니다. Flexbox의 기본 동작 원리 display: flex 를 body 요소에 적용하게 되면, body의 자식 요소들이 flex 컨테이너가 됩니다. 이 경우, 자식 요소들은 flex 아이템으로서 기본적으로 행(row) 방향으로 배치됩니다. 문제의 원인과 해결 방법 body 요소에 display: flex 를 설정하면 자식 요소들(이 경우 #root 가 될 가능성이 큽니다)이 flexbox 아이템의 특성을 가지게 되어, 부모 요소인 body가 자식 요소들의 배치를 위해 필요한 공간을 자동으로 확장하게 됩니다. 이렇게 되면 body의 높이가 자식 요소를 완벽히 감싸주는 형태로 변하며, 설정된 배경색이 온전히 보이게 됩니다. 즉, display: flex 를 사용함으로써, body는 자식 요소의 컨텐츠를 모두 감싸는 형태로 조정될 수 있으며, 이로 인해 원하는 스타일이 전체적으로 적용됩니다. 유사한 해결 사례 12.13) 마지막 부분, body의 display 속성 이 링크에서는 body에 display: flex 를 설정함으로써 백그라운드 컬러가 제대로 적용되지 않았던 문제를 해결하고 있습니다. 위 내용을 토대로 해당 현상의 원인과 해결책에 대한 이해가 도움이 되셨으면 좋겠습니다. 저희가 제공해드린 링크를 참조하시면, 문제를 보다 자세히 이해하실 수 있을 것입니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.