12.13) 하단 여백 스타일링 관련 질문 드립니다.
31
投稿した質問数 1
QnA를 살펴보다가 아래 질문글을 보게 되었는데요,
min-height: 100vh를 넣으면display: flex없이도 전체 화면을 꽉 채우게 설정이 돼서 사실display: flex가 없어도 되는 상황이었어요. 이 부분은 제가 강의에 수정해두도록 하겠습니다
위의 내용으로 답변해주셨더라구요!
저는 지금 #root에 min-height: 100vh가 있는 상황인데도 불구하고
.Editor > section {
margin-bottom: 40px;
}을 추가하면 하단 여백이 생겨서 강의 내용대로 body에 display: flex; 를 추가해야 의도한 대로 보이는데,
그 전에는 어떤 부분이 달라서 min-height: 100vh만으로도 스타일링이 가능했던건지 궁금합니다..!
혹시 강의가 수정된 부분이 있다면 어떤 부분인지 알 수 있을까요?
回答 2
1
안녕하세요 멍멍님 이정환입니다
강의 교안으로 업로드 해 둔 코드에서는 #root 요소의 display:flex 속성을 제거해도 전체 컨테이너가 잘 감싸져 있는것을 방금 확인했습니다.
아마 사용하시는 브라우저의 이슈이거나 혹은 코드상 다른 부분에 차이가 있지 않을까 싶은데요 전체 코드를 확인하지 않고서는 정확한 원인을 파악하기 어렵기에 현재로써는 짐작가는 부분은 없는 상황입니다 ㅠㅠ
만약 궁금하시다면 전체 코드를 GitHub을 통해 링크로 제공해주시면 어떤 부분에서 차이가 발생하는지 확인해보겠습니다.
0
안녕하세요 정환님!
우선 GitHub에 올라온 코드랑 제가 작성한 코드의 차이는 없더라구요..!
그래서 정환님 코드로 실행해서 확인을 다시 해봤는데 화면 배율 설정에 따라 차이가 나는 것 같습니다.
제 환경 기준 90% 이하로 하면 아래처럼 잘 보이는데,
100%로 하면 스크롤바가 생기면서 하단 여백이 생기더라구요
강의 내용대로 flex 속성 넣어주면 제대로 나와서 문제는 없는 것 같습니다!
확인해주셔서 감사합니다 🙂
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
37
2
VSCode 설정 문의
0
47
2
PPT 코드 관련 질문
0
39
2
useEffect와 lifecycle문의
0
48
2
프론트엔드 학습 수준 문의
0
63
2
리액트 챕터별 코드에서 eslint 설정파일이 없어요
0
59
2
데이터 로딩중 화면만 계속 나와요!!
0
60
2
퍼블리셔일경우 어느정도 수준까지 강의를 들어야할까요
0
91
2
이후의 커리큘럼 문의
0
111
2
실슬환경 설정에서 save후 console.log 부분이 새로고침이 안되는현상입니다.
0
58
2
최적화 관련 질문있습니다 (useMemo 등)
0
93
3
프로바이더 컴포넌트의 위치는 어떤 기준인가요?
1
89
3
Date 객체에 관련하여 질문드립니다.
0
91
2
리액트 개정판 교재 질문
0
65
2
예제코드가 안나와요!
0
79
2
select a variant 선택에서 javascript와 javascript+react compiler 중 무엇을 선택해야하나요? com
0
117
2
onMouseEnter 관련 문의 드립니다
0
100
3
배열의 렌더링 관련 질문 드립니다.
0
79
2
2:40초 refObj를 콘솔로 출력시 오류가 발생합니다.
0
123
2
TS, 리액트 강의중에 뭘 먼저 수강하는게 좋을까요?
0
144
2
useCallback 적용한 onCreate, onUpdate, onDelete 함수..
0
71
1
vs code 자동완성관련 문의
0
146
2
91강 useEffect내에서 상태변화함수 호출시 발생하는 에러
1
196
2
87강 필터 함수 질문
0
72
2