App.css 변경 후 적용이 되지 않습니다.
736
작성한 질문수 5
안녕하세요! App.css 부분에서 그랩님께서 말씀하신대로 전부 적용했는데 리액트 웹에서 반영이 되지 않네요. 개발자 도구창까지 캡쳐해도 첨부드립니다!
답변 5
2
아 확인했습니다! 현재 브라우저 개발자도구 Elements 내역을 봤을 때 <!DOCTYPE html>이 적용되어 있네요. 그렇게 되면 최상위 부모에 height 100%를 주더라도 루트에서 height를 제대로 잡아주지 못해서 브라우저의 height 만큼을 가져가지 못하게 됩니다.
뒤에서도 비슷한 이슈를 겪으신 분들이 계셨는데, 확실하게 하려면 #body에 min-height: 100vh로 주시곘어요? %는 부모 컴포넌트를 기준으로 크기가 적용되는 반면 vh는 명시적으로 브라우저의 너비를 기준으로 1%가 1vh입니다. 즉 100vh는 브라우저의 너비를 100%로 가져가게 될 겁니다!
이 부분은 강의 뒷부분에서 다시 다룹니다!
0
잘 해결되었습니다. 그렇다면 그랩님의 코드에서는 그냥 height를 했는데 반영이 되고, 제가 했을 때는 왜 <!DOVTYPE html>로 적용되어 그냥 height를 인식하지 못하는 건가요? 자동적으로 그렇게 설정이 되는 것인지 궁급합니다:)
0
두분 질문에 답변을 드리자면,
일반적으로 <!DOCTYPE html>태그가 있다면 기본적으로 적용되는 css가 따로 있습니다. 이렇게 적용되는 css는 루트 엘리먼트에 기본 height가 따로 적용되어 있게 됩니다. 따라서 루트의 height 여부와 상관없이 #body라는 엘리먼트에 height를 준 것이라고 보면 됩니다 :)
즉 css적용은 둘다 상관없이 되고 있지만, 위 DOCTYPE 태그로 인해 Root 엘리먼트의 속성이 영향을 끼친다고 보시면 될 것 같아요.
0
저도 SEOHWAN LEE님 과 마찬가지로 왜 <!DOVTYPE html>로 적용되어 body id 지정해야 CSS 적용되고, 그냥 height를 인식하지 못하는 것인지 궁금합니다!
0
0
그랩님이 하신대로라면 body에 100%가 반영되어 footer가 아래로 좀 더 내려가야 하는데 app.css를 변경했는데도 불구하고 이 부분이 반영되지 않은 모습입니다!
[해결]그랩님 답변 주세요.
0
165
2
그랩님의 답변을 기다립니다/102강 전반적인 에러
0
144
2
[그랩님께]101강 안드로이드 에러들(Key prop)해결방법 궁금합니다.
0
126
2
[재질문][그랩님 답변 부탁드립니다]101강
0
143
2
[그랩님 답변 부탁드립니다]101강 Axios 에러와 502 Bad Gateway 질문
0
99
2
Ngrok 설치 후 forwarding Url 에러
0
134
2
[그랩님께,Ngrok 악성코드 인식 해결방법]질문 드립니다.
0
222
2
Ngrok 설치 후 forwarding Url로 연결 불가
0
138
1
그랩님,[꼭] 답변 부탁드립니다.
0
68
1
[꼭][[꼭] 그랩님, 답변 부탁드립니다], Failed to load resource: the server responded with a status of 404 (Not Found) 상품 상세 페이지 질문입니다.
0
155
1
6강/7강 수업
0
53
1
그랩님, 상품 상세 페이지 에러와 의문점 질문드립니다.
0
99
2
그랩님, 해결되지 않은 에러 메시지 [꼭] 답변 부탁 드립니다.
0
138
2
[재 질문]Cannot read properties of undefined (reading 'map') TypeError: Cannot read properties of undefined (reading 'map') 에러 해결 어떻게 하나요?
0
89
1
Cannot read properties of undefined (reading 'map') TypeError: Cannot read properties of undefined (reading 'map') 에러 해결 어떻게 하나요?
0
130
2
일반적인 css 꾸미기에서 width와 height의 값?
0
94
2
Windows에서의 업로드 후 홈화면 상품이미지 오류 해결방법
0
197
1
그랩마켓 웹화면 구현하기 -2 질문입니다.
0
121
1
react에 반영이 되지 않습니다.
0
243
1
터미널 npm install -g create-react-app 작성 후 오류
0
421
1
create-react-app my app 실행 시 에러
0
357
2
포스트맨 질문
0
100
1
<꼭 답변 부탁 드립니다>그랩선생님, [컴포넌트 사용하기] 강의에서 질문 있습니다.
0
261
2
그랩선생님, 질문 답변 부탁 드립니다.vscode에서 npm install -g create-react-app 입력 후 에러 입니다.
0
481
2