12.13) 하단 여백 스타일링 관련 질문 드립니다.
3
작성한 질문수 1
QnA를 살펴보다가 아래 질문글을 보게 되었는데요,
min-height: 100vh를 넣으면display: flex없이도 전체 화면을 꽉 채우게 설정이 돼서 사실display: flex가 없어도 되는 상황이었어요. 이 부분은 제가 강의에 수정해두도록 하겠습니다
위의 내용으로 답변해주셨더라구요!
저는 지금 #root에 min-height: 100vh가 있는 상황인데도 불구하고
.Editor > section {
margin-bottom: 40px;
}을 추가하면 하단 여백이 생겨서 강의 내용대로 body에 display: flex; 를 추가해야 의도한 대로 보이는데,
그 전에는 어떤 부분이 달라서 min-height: 100vh만으로도 스타일링이 가능했던건지 궁금합니다..!
혹시 강의가 수정된 부분이 있다면 어떤 부분인지 알 수 있을까요?
답변 1
0
안녕하세요, 인프런 AI 인턴입니다. 멍멍님.
질문해주신 내용에 대해 고민해볼 가치가 있네요. min-height: 100vh를 #root에 설정한 경우, 이 속성은 기본적으로 콘텐츠 영역을 전체 화면 높이로 잡아주게 됩니다. 이는 대부분의 상황에서 하단 여백을 피할 수 있도록 설계됩니다. 하지만 CSS의 다른 점이나 호환성 문제 때문에, 같은 설정이어도 브라우저마다 다르게 렌더링될 수 있습니다.
질문 주신 영상 마지막에서 body 태그의 display: flex 설정을 안해도 문제가 발생되지 않는 이유와 관련된 게시물에서는 display: flex와 min-height: 100vh가 어떻게 상호작용하여 콘텐츠를 화면에 정확히 맞추어 주는지를 설명하고 있습니다.
내용 요약:
1. min-height: 100vh는 보통 페이지 로딩 시 전체 화면에 맞추지만, 내부 콘텐츠에 따라 추가적인 조정이 필요할 때가 있습니다.
2. display: flex는 자식 요소들을 유연하게 배치해주므로, 특정 조건에서 min-height: 100vh만으로는 부족한 여백 조정을 flex 속성으로 맞출 수 있습니다.
강의 변경사항
강사가 이후 강의 업데이트에서 #root에 min-height: 100vh를 추가하는 방법을 강의에 수정함으로써, display: flex의 필요성을 줄인 상황에 대한 설명을 하고 있습니다.
이와 관련된 기존 질문을 통해 비슷한 문제를 이해하는데 도움이 될 수 있을 것입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
에러 질문드립니다
0
27
2
VSCode 설정 문의
0
44
2
PPT 코드 관련 질문
0
35
2
useEffect와 lifecycle문의
0
45
2
프론트엔드 학습 수준 문의
0
62
2
리액트 챕터별 코드에서 eslint 설정파일이 없어요
0
59
2
데이터 로딩중 화면만 계속 나와요!!
0
58
2
퍼블리셔일경우 어느정도 수준까지 강의를 들어야할까요
0
91
2
이후의 커리큘럼 문의
0
109
2
실슬환경 설정에서 save후 console.log 부분이 새로고침이 안되는현상입니다.
0
57
2
최적화 관련 질문있습니다 (useMemo 등)
0
93
3
프로바이더 컴포넌트의 위치는 어떤 기준인가요?
1
88
3
Date 객체에 관련하여 질문드립니다.
0
91
2
리액트 개정판 교재 질문
0
62
2
예제코드가 안나와요!
0
79
2
select a variant 선택에서 javascript와 javascript+react compiler 중 무엇을 선택해야하나요? com
0
117
2
onMouseEnter 관련 문의 드립니다
0
99
3
배열의 렌더링 관련 질문 드립니다.
0
78
2
2:40초 refObj를 콘솔로 출력시 오류가 발생합니다.
0
123
2
TS, 리액트 강의중에 뭘 먼저 수강하는게 좋을까요?
0
143
2
useCallback 적용한 onCreate, onUpdate, onDelete 함수..
0
71
1
vs code 자동완성관련 문의
0
140
2
91강 useEffect내에서 상태변화함수 호출시 발생하는 에러
1
195
2
87강 필터 함수 질문
0
72
2