리액트 스타일, styled-components

VS코드 터미널을 열어서 설치

# with npm
npm install styled-components

 

vs코드 확장파일

// import logo from './logo.svg';

import styled from 'styled-components';

import './App.css';

import { Title } from './MyCss';

// useRef (디자인)

// dom을 변경할 때 사용

// const a = {

//   backgroundColor: 'red',

// };

// const Title = styled.h1`  

//   font-size: 1.5em;

//   text-align: center;

//   color: #BF4F74;

// `; 외부 파일로 꺼낼 수 있음. MyCss에 코드 작성

function App() {

  return (

    <div>

      <Title>style components</Title>

      <div className='box-style'>CSS임포트</div>

    </div>

  );

}

export default App; 

 

 

// MyCss.js

import styled from "styled-components"; 

const Title = styled.h1`  

  font-size: 1.5em;

  text-align: center;

  color: #BF4F74;

`;

export { Title };

 

 

// App.css

.box-style {

  background-color: gray;

}

출력 화면

헤더 푸터 

// import logo from './logo.svg';

import styled from 'styled-components';

import './App.css';

import { Title } from './MyCss';

import Header from './components/Header';

import Footer from './components/Footer';

import Login from './components/Login';

// useRef (디자인)

// dom을 변경할 때 사용

// const a = {

//   backgroundColor: 'red',

// };

// const Title = styled.h1`  

//   font-size: 1.5em;

//   text-align: center;

//   color: #BF4F74;

// `; 외부 파일로 꺼낼 수 있음.

function App() {

  return (

    <div>

      <Header></Header>

      <Title>style components</Title>

      <div className='box-style'>CSS임포트</div>

      <Login></Login>

      <Footer></Footer>

    </div>

  );

}

export default App;

 

 

import React from 'react';

import styled from 'styled-components';

// rsc

// 하나의 컴포넌트를 생성(재사용)

// styled-components => js파일과 css파일 관리 편함

const HeaderList = styled.div`

  border:1px solid black;

  height: 100px;

`;

const Header = () => {

  return (

      <HeaderList>

        <ul>

          <li>메뉴1</li>

          <li>메뉴2</li>

        </ul>

      </HeaderList>

  );

};

// rsc

export default Header;

 

 

import React from 'react';

import styled from 'styled-components';

// rsc

// 하나의 컴포넌트를 생성(재사용)

// styled-components => js파일과 css파일 관리 편함

const FooterList = styled.div`

  border:1px solid black;

  height: 300px;

`;

const Footer = () => {

  return (

      <FooterList>

        <ul>

          <li>오시는길 : 수원어쩌구...</li>

          <li>전화번호 : 010123920</li>

        </ul>

      </FooterList>

  );

};

// rsc

export default Footer;

출력