[React] css 설정하기

1. css 설정하기

import './App.css';

let num = 10;
let list = [1,2,3,4];

function App() {
  return <div>
    </div>

}

export default App;

/*  css 는 그 파일에서만 쓰는게 좋다 */
h1{
  color: red;
}

div{
  border: 1px solid black;
}

import './App.css';
//  css 파일은 대문자로 시작해야 됨.

function App() {
  return <div>
    <h1>안녕</h1>
    <div className="box">박스</div>

    </div>

}

export default App;

2. 컴포넌트 만들기

import React from 'react';

// 함수가 리턴하는게 디자인
function header() {
    return (
        <div>
        <ul>
          <li>홈</li>
          <li>글쓰기</li>
          <li>로그아웃</li>
        </ul>
      </div>
  
      );
}

// export 를 쓰면 다른 곳에서 사용할 수 있음.
export default header;

import './App.css';
import Header from './components/Header';


function App() {
  return (
  <div>
    <Header />
    <h1>안녕</h1>
    <div className="box">박스</div>
  </div>
)}

export default App;

3. 컴포넌트 디자인

styled-components

CSS for the <Component> Age

https://styled-components.com/

styled-components: Basics

Get Started with styled-components basics.

https://styled-components.com/docs/basics#installation

import React from 'react';
import styled from 'styled-components';

const MyLi = styled.li`
color: green;
font-size: 30px;
`;
function Header() {
    return (
        <div>
        <ul>
          <MyLi>홈</MyLi>
          <MyLi>글쓰기</MyLi>
          <MyLi>로그아웃</MyLi>
        </ul>

        </div>
    );
}

export default Header;