-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
App.css 변경 후 적용이 되지 않습니다.
21.07.14 16:41 작성 조회수 394
1
안녕하세요! App.css 부분에서 그랩님께서 말씀하신대로 전부 적용했는데 리액트 웹에서 반영이 되지 않네요. 개발자 도구창까지 캡쳐해도 첨부드립니다!
답변을 작성해보세요.
2
그랩
지식공유자2021.07.15
아 확인했습니다! 현재 브라우저 개발자도구 Elements 내역을 봤을 때 <!DOCTYPE html>이 적용되어 있네요. 그렇게 되면 최상위 부모에 height 100%를 주더라도 루트에서 height를 제대로 잡아주지 못해서 브라우저의 height 만큼을 가져가지 못하게 됩니다.
뒤에서도 비슷한 이슈를 겪으신 분들이 계셨는데, 확실하게 하려면 #body에 min-height: 100vh로 주시곘어요? %는 부모 컴포넌트를 기준으로 크기가 적용되는 반면 vh는 명시적으로 브라우저의 너비를 기준으로 1%가 1vh입니다. 즉 100vh는 브라우저의 너비를 100%로 가져가게 될 겁니다!
이 부분은 강의 뒷부분에서 다시 다룹니다!
SEOHWAN LEE
질문자2021.07.16
잘 해결되었습니다. 그렇다면 그랩님의 코드에서는 그냥 height를 했는데 반영이 되고, 제가 했을 때는 왜 <!DOVTYPE html>로 적용되어 그냥 height를 인식하지 못하는 건가요? 자동적으로 그렇게 설정이 되는 것인지 궁급합니다:)
0
그랩
지식공유자2022.08.07
두분 질문에 답변을 드리자면,
일반적으로 <!DOCTYPE html>태그가 있다면 기본적으로 적용되는 css가 따로 있습니다. 이렇게 적용되는 css는 루트 엘리먼트에 기본 height가 따로 적용되어 있게 됩니다. 따라서 루트의 height 여부와 상관없이 #body라는 엘리먼트에 height를 준 것이라고 보면 됩니다 :)
즉 css적용은 둘다 상관없이 되고 있지만, 위 DOCTYPE 태그로 인해 Root 엘리먼트의 속성이 영향을 끼친다고 보시면 될 것 같아요.
0
starbee
2022.07.26
저도 SEOHWAN LEE님 과 마찬가지로 왜 <!DOVTYPE html>로 적용되어 body id 지정해야 CSS 적용되고, 그냥 height를 인식하지 못하는 것인지 궁금합니다!
0
SEOHWAN LEE
질문자2021.07.15
그랩님이 하신대로라면 body에 100%가 반영되어 footer가 아래로 좀 더 내려가야 하는데 app.css를 변경했는데도 불구하고 이 부분이 반영되지 않은 모습입니다!
0
답변 5