[URECA] Day47 피그마 → HTML 변환

      
      
      
    
import React from 'react';

const Header = () => {
  return <div className="header">헤더</div>;
};

export default Header;

      
      
      
    
import React from 'react';

const Footer = () => {
  return <div className="footer">푸터</div>;
};

export default Footer;

 

      
      
      
    
import React from 'react';
import Header from './Header';
import Footer from './Footer';

// 레이아웃 예시, 반드시 따라할 필요x
const Layout = () => {
  return (
    <div>
      <Header>
        <div>내용</div>
      </Header>
      <Footer />
    </div>
  );
};

export default Layout;

 

피그마 앱을 연다. 

1. 화면 크기 입력 -frame에 해상도 높이 크기 입력

2. 플러그인 설치 - anima 혹은 autoHTML 설치

autolayout을 해야인식하기 편하다.