[🐾 일지] create-react-app에서 전체 화면 css 주는 법

이제 개발을 슬슬 시작하려고 해서 css로 영역 확인 좀 하려고 했더니;;

내 프로젝트는 전체 페이지를 써야 되는데... 이게... 안 된다?

 

인터넷을 급하게 찾아보니 

1. width:100vw; height:100vh;
2. width:100%; height:100%;

 

이거 두 개 중에 하나라 vw, vh를 먼저 사용해봤더니 되긴 하는데 이 놈의 스크롤...

부랴부랴 %로 바꿨는데 안 된다..ʕ•̠͡•ʔ ? 

 

create-react-app으로 프로젝트를 하게 되면, 생성이 되어 있던 index.html 의 html, body를 먼저 width, height: 100%로 설정을 해 주고 나서 해당되는 컴포넌트의 css를 100%로 하면 될 줄 알았다.

 

근데 왠 걸...

내 App.js 파일은 아래와 같았다.

 

import { Route, Routes } from 'react-router-dom';
import { About, Home } from './pages';

function App() {
    return (
        <div>
            <Routes>
                <Route exact path="/" element={<About />} />
                <Route path="home" element={<Home />} />
            </Routes>
        </div>
    );
}

export default App;

 

div가 눈치 없게 껴 있었기 때문에 이 div가 랜더링하는 component의 부모가 되어서 얘도 100%로 설정을 해 주어야 했던 것...

 

index.html [html, body [div id = "root"]] - App.js [div] - 내 컴포넌트 [div]

 

내 컴포넌트에 오기까지 있는 모든 부모 요소들을 다 100% 설정을 해주는 방법도 있지만,

나는 그냥 App.js에 <div></div> ➡️ <></> 이렇게 바꿔버렸다. 

 

그러면 index.html [html, body [div id = "root"]] - 내 컴포넌트 [div] 이 부분들만 설정해주면 된다.