[MUI] 레이아웃 구현

<Box sx={{ flexGrow : 1}}>
        .
        .
        .
</Box>

 

 

Box 컴포넌트

• 다른 컴포넌트 묶어서 스타일 및 레이아웃 적용
• <div>요소 감쌈
• props 사용해 스타일, 레이아웃, 간격 등 설정
• 내부 요소 묶어서 스타일 직접 지정

 

<AppBar position="static" sx={{mb: 4}}>
          .
          .
          .
</AppBar>

 

AppBar 컴포넌트

• 헤더 영역 표시
• position으로 위치를 정적(static)으로 설정 -> 페이지 스크롤과 상관없이 항상 고정된 위치 표시
• sx props

• 사용자화해서 스타일 적용
• mb: 4 / marginBottom을 4의 단위로 설정 -> 하단에 4만큼 여백

 

<Toolbar sx={{ display: 'flex', justifyContent: 'space-between' }}>
            .
            .
            .
</Toolbar>

 

Toolbar 컴포넌트

• 상단 네비게이션, 로고, 검색 창, 액션 버튼 등 상단 도구바(Toolbar) 생성하는데 사용
• sx props

• 도구바 내부 요소 양끝에 위치시키는 CSS

 

<Typography
       variant="h1"
       sx={{ fontSize: 26, fontWeight: 'bold', cursor: 'pointer' }}>
                .
                .
</Typography>

 

Typography 컴포넌트

• 텍스트 스타일링하는데 사용
• variant: 텍스트 스타일 지정

 

<Fab color="primary">
	.
        .
</Fab>

 

Fab 컴포넌트

ex) 화면에 둥둥 떠있는 것처럼 보이게 하는 버튼

주로 주요 작업을 나타내거나 추가적인 동작을 수행하는데 사용