AntDesign

 AntDesign - Grid system 

 

 Col, Row 

 

 

***

col : 1-24 값

ex )  <Col span={8}/> : 너비가 같은 3개의 열

 

row : [ horizontal, vertical ] 

>> hor : 컨텐츠간 좌우 간격 / ver : row간 상하 간격  (px) 

 

 

 

***반응형

{xs:8, sm:16, md:24, lg:32}

 

ex) 배열 활용

[ horizontal, vertical ]  [ 16, {xs:8, sm:16, md:24, lg:32} ]

 

 

 

antDesign 사이트 참고

https://ant.design/components/grid/#header

 

 

 Card 

  1) import {Card} from 'antd';

      : 일반 태그처럼 간단하게 사용.

      ex) <Card> <span>boolah</span> </Card>

 

     -Card 속성값 : antdesign 사이트 참고ant.design/components/card/#

 

  2) import {Card} from 'antd';      //      const { Meta } = Card;

       : flexible한 content를 담고 싶을 때

       : 차이를 잘 모르겠음...

          ex) <Meta avatar={ <Avatar src={video.writer.image}/>  title={video.title]  description={video.description} } />

      

 

 

 AntDesign - Comment 

 Comment 

속성

-actions / author / avatar / content ...