[ React ] Ant design Layout 적용해보기

 

아래 링크로 이동하면 다양한 구조로 적용이 가능하다.

https://ant.design/components/layout

 

Ant design 설치

---

npm i antd

 

 

 

제일 심플한 구조인 Header, Content, Footer 구조로 만들어 보자.

 

App.js

---

import './App.css';
import { Layout } from 'antd'; // Ant design의 layout을 가져온다.
const { Header, Content, Footer } = Layout; // layout안에 Header, Content, Footer을 가져온다.
function App() {
  return (
    <Layout className="App">
      <Header
        style={{
          display: 'flex',
          color: '#fff'
        }}
      >
        Logo
      </Header>
      <Content 
        style={{
          minHeight: '500px',
          background: '#fff'
        }}
      >
        content
      </Content>
      <Footer 
        style={{
          minHeight: '200px',
        }}
      >
        Footer
      </Footer>
    </Layout>
  );
}

export default App;

 

 

 

결과물

---