import React from 'react';
import { Container, Row, Col } from 'react-bootstrap';

function MyComponent() {
  return (
    <Container>
      <Row>
        <Col md={9}>이 공간은 전체 너비의 75%를 차지합니다.</Col>
        <Col md={3}>이 공간은 전체 너비의 25%를 차지합니다.</Col>
      </Row>
    </Container>
  );
}

export default MyComponent;

import React from 'react';
import Grid from '@mui/material/Grid';
import Paper from '@mui/material/Paper'; 

function MyComponent() {
  return (
    <Grid container spacing={2}>
      <Grid item xs={9}>
        <Paper style={{ height: '100%', background: '#f0f0f0' }}>
          {/* 여기에 9의 비율로 표시할 컨텐츠를 넣습니다. */}
          9의 비율 영역
        </Paper>
      </Grid>
      <Grid item xs={3}>
        <Paper style={{ height: '100%', background: '#d0d0d0' }}>
          {/* 여기에 3의 비율로 표시할 컨텐츠를 넣습니다. */}
          3의 비율 영역
        </Paper>
      </Grid>
    </Grid>
  );
}

export default MyComponent;