인프런 커뮤니티 질문&답변
작성한 질문수
12.13 new 페이지 구현하기 1.UI 부분에서 마지막 설명부분이 이해가 가지 않습니다
작성
·
7
0
마지막에서 작성완료와 취소하기 버튼 부분에 배경색 하얀색 부분 즉 #root background-color:white부분이 적용되지 않았습니다.
이때 해결방법을 body에 display:flex를 넣음으로써 해결이 된다하셨는데, 이게 root부분에 어떤 영향을 끼치길래 height가 늘어났는지 궁금합니다
답변 1
0
안녕하세요, 인프런 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를 설정함으로써 백그라운드 컬러가 제대로 적용되지 않았던 문제를 해결하고 있습니다.
- 이 링크에서는 body에
위 내용을 토대로 해당 현상의 원인과 해결책에 대한 이해가 도움이 되셨으면 좋겠습니다. 저희가 제공해드린 링크를 참조하시면, 문제를 보다 자세히 이해하실 수 있을 것입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.