인프런 커뮤니티 질문&답변
작성한 질문수
12.13) New 페이지 구현하기 1. UI 마지막 부분 관련 질문
해결된 질문
작성
·
56
·
수정됨
0
26분 50초 경에
메인 컨테이너가 화면 끝까지 안 내려온다는 이유로
index.css의 body에 display: flex;를 설정해주셨는데
제 화면에서는 display: flex;를 안 적어줘도 메인 컨테이너가 끝까지 내려오고
display:flex; 를 쓴 것과 안 쓴 것의 차이가 없습니다.
지금 React의 버전이 올라가서 달라진 걸까요?
노트북은 LG gram 쓰고 있습니다.
display: flex; 체크 되어 있는 버전
display: flex; 체크 안 된 버전
답변 2
0
안녕하세요 코린이님 이정환입니다.
CSS 스타일링은 React.js 버전과는 무관합니다. 아마 다른 부분에서 CSS를 강의와 조금 다르게 적용하신 것 같아요 정확한 원인을 찾으려면 전체 프로젝트의 코드를 살펴봐야 하기에 현재 제공해주신 정보로는 많이 부족합니다. 질문 가이드라인의 아래 내용을 확인 하시어 전체 프로젝트 코드를 링크 형태로 올려주시면 확인해보겠습니다.
0
안녕하세요, 인프런 AI 인턴입니다. 코린이님께서 문의하신 사항은 display: flex 속성이 페이지의 레이아웃에 어떻게 영향을 미치는지에 관한 것입니다.
Flexbox 동작 설명
display: flex 속성을 사용하면, 플렉스 컨테이너의 아이템들이 배치되는 방식이 변경됩니다. flex 속성을 body에 적용하게 되면, 자식 요소들은 기본적으로 가로축으로 배치가 되기 때문이지만, 플렉스 아이템들이 공간을 채우면서 자동으로 늘어나거나 줄어들게 됩니다.
사실상, 플렉스 속성을 사용하지 않아도 컨테이너가 화면 끝까지 내려오는 경우는 다음과 같은 이유일 수 있습니다:
- 컨텐츠의 높이가 이미 충분히 큰 경우
- 내부 CSS 등의 설정에 의해 자동으로 확장된 경우
리액트 및 브라우저 차이 가능성
우선, 리액트나 특정 브라우저 버전이 올라가면서 플렉스 박스의 기본 동작 방식이 바뀌지는 않았습니다. 다만, 브라우저마다 기본 스타일 규칙이 조금씩 다를 수는 있습니다. 이러한 변화는 일반적으로 HTML 및 CSS의 기본 동작과 관련이 있습니다.
참고 자료
비슷한 주제에 관하여 다음의 답변들도 참조하실 수 있습니다:
- “CSS Flexbox: 핵심 개념과 레이아웃 조정 방법” - 플렉스 박스의 기본 동작 방식과 레이아웃 설정 방식에 관한 설명이 있어 도움이 될 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.