inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

[그랩마켓] Javascript 적용하기 - 1 강의 내용 중 App.css 관련 질문

345

고광우

작성한 질문수 28

1

Javascript 적용하기 과정에서 App.css를 모두 날리고 

아래와 같이 App.css를 수정하였습니다.

[App.css 코드]

html,
body,
#root,
#root > div {
  height: 100%;
}

그런데 브라우져 화면에서 보면 height 100%가 적용되어 있지 않은 것 같은 화면으로 확인 되고 있습니다.

[화면 이미지]

위와 같이 height가 적용되지 않은 것 과 같은 모습으로 보입니다.

개발자 도구에서 height 적용을 확인 해 보면 모두 100%로 되어 있습니다.

[html 100% height]

[body 에서 height 100%로 설정된 이미지]

[root와 첫 번재 div에 height 적용된 이미지]

어디가 잘못 되었는지 가르쳐 주시면 감사하겠습니다.

혹시 몰라서 index.js, App.js, App.css 코드를 아래에 적어놓겠습니다.

[index.js]

import "./index.css";

function MainPage() {
  return (
    <div>
      <div id="header">
        <div id="header-area">
          <img src="images/icons/logo.png" />
        </div>
      </div>
      <div id="body">
        <div id="banner">
          <img src="images/banners/banner1.png" />
        </div>
        <h1>판매되는 상품들</h1>
        <div id="product-list"></div>
      </div>
      <div id="footer"></div>
    </div>
  );
}

export default MainPage;

[App.js]

import "./App.css";
import MainPageComponent from "./main/index.js";
import "./index.css"; //index.css는 export 객체가 없다 그래서 그냥 ./index.css를 하면 된다

function App() {
  return (
    <div>
      <MainPageComponent></MainPageComponent>
    </div>
  );
}

export default App;

[App.css]

html,
body,
#root,
#root > div {
  height: 100%;
}

감사합니다.

javascript react-native css tensorflow nodejs express HTML/CSS react 머신러닝 배워볼래요?

답변 2

2

조재훈

근데 index.css파일의 코드를 봐야 고수분들께서 고쳐야하는 부분을 찾을 수 있을것 같은데요

1

그랩

안녕하세요. css는잘 적용된 것처럼 보입니다. 아래 css를 주어 id가 body인 쪽 콘텐츠들의 높이를 주게 되면 원하는 대로 높이가 맞춰질 거에요!

#body {

    height: 100vh;

}

0

고광우

안녕하세요. 그랩 님
빠른 답변을 주셔서 감사합니다. 
그러나 App.js에 아래와 같이 적용 했으나 footer는 여전이 화면에서 상단에 위치 하고 있습니다.
이 상황을 어떻게 해결해야 하는지 가르쳐 주시면 감사하겠습니다.

[App.css 코드]

html,
body,
#root,
#root > div {
  height: 100%;
}
#body {
  height: 100vh;
}

[화면 상태]

해결 방안을 제시 해주시면 감사하겠습니다.

0

그랩

죄송합니다. 제가 댓글을 놓쳤었네요. 혹시 해결하셨을까요? 
올려주신 코드만 봤을 때는 문제가 없어보여서 제가 올린 github 소스코드와 비교해보셨을 때 차이가 있으신가요?!

0

고광우

한 번 github 코드와 비교한 후 비교 결과 달도록 하겠습니다.

[해결]그랩님 답변 주세요.

0

192

2

그랩님의 답변을 기다립니다/102강 전반적인 에러

0

165

2

[그랩님께]101강 안드로이드 에러들(Key prop)해결방법 궁금합니다.

0

139

2

[재질문][그랩님 답변 부탁드립니다]101강

0

163

2

[그랩님 답변 부탁드립니다]101강 Axios 에러와 502 Bad Gateway 질문

0

119

2

Ngrok 설치 후 forwarding Url 에러

0

147

2

[그랩님께,Ngrok 악성코드 인식 해결방법]질문 드립니다.

0

251

2

Ngrok 설치 후 forwarding Url로 연결 불가

0

158

1

그랩님,[꼭] 답변 부탁드립니다.

0

76

1

[꼭][[꼭] 그랩님, 답변 부탁드립니다], Failed to load resource: the server responded with a status of 404 (Not Found) 상품 상세 페이지 질문입니다.

0

162

1

6강/7강 수업

0

56

1

그랩님, 상품 상세 페이지 에러와 의문점 질문드립니다.

0

105

2

그랩님, 해결되지 않은 에러 메시지 [꼭] 답변 부탁 드립니다.

0

148

2

[재 질문]Cannot read properties of undefined (reading 'map') TypeError: Cannot read properties of undefined (reading 'map') 에러 해결 어떻게 하나요?

0

95

1

Cannot read properties of undefined (reading 'map') TypeError: Cannot read properties of undefined (reading 'map') 에러 해결 어떻게 하나요?

0

134

2

일반적인 css 꾸미기에서 width와 height의 값?

0

98

2

Windows에서의 업로드 후 홈화면 상품이미지 오류 해결방법

0

204

1

그랩마켓 웹화면 구현하기 -2 질문입니다.

0

127

1

react에 반영이 되지 않습니다.

0

251

1

터미널 npm install -g create-react-app 작성 후 오류

0

430

1

create-react-app my app 실행 시 에러

0

358

2

포스트맨 질문

0

105

1

<꼭 답변 부탁 드립니다>그랩선생님, [컴포넌트 사용하기] 강의에서 질문 있습니다.

0

269

2

그랩선생님, 질문 답변 부탁 드립니다.vscode에서 npm install -g create-react-app 입력 후 에러 입니다.

0

492

2