[ToyProject-Todomate] 투두메이트 클론 프로젝트 15

---

🔷 CloneTodo ☑ - Todomate Clone Project  |  Team CloneMate

 

CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트

 

---

오늘은 레이아웃 배치까지는 해야겠지... 싶다.

 

sx props를 사용하기 위해서 (스타일을 적용하려고) <div>를 <Box>로 바꿔준다.

 

import Box from '@mui/material/Box';

 

상단에는 Box 패키지를 적용해줘야 한다.

 

 

우선 Main은 

 

import React from 'react';
import Content from './Content';
import Box from '@mui/material/Box';

export default function Main() {

    return (
        <Box className='main-wrap' backgroundColor='#e4f2b4' sx={{ position: 'relative', width: '100vw', height: '100vh' }}>
        {/* <p>main</p> */}
        <Content />
        </Box>
    );
}

 

 

 

이렇게 CSS를 간단하게 인라인 방식으로 선언해줄 수 있다.

 

 

 

기본 레이아웃은 다 잡았는데 높이는 그렇다 쳐도 가로를 뷰포트로 잡으니 크기가 줄어들면 예쁘게 레이아웃이 고정되지 않는 현상이 있다.

grid 연습을 해봐야 하나.....