CSS Reset

https://meyerweb.com/eric/tools/css/reset/

import React from "react";
import Router from "./Router";
import { createGlobalStyle } from "styled-components";

const CssDefault = createGlobalStyle`
	html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
`;

function App() {
	return (
		<>
			<CssDefault />
			<Router />
		</>
	);
}

export default App;

폰트
https://fonts.google.com
색 정하기
https://flatuicolors.com

css import하는 방법들

1. CSS 파일 import

import style.css 하고 태그 id또는 classname으로 css 설정

.container {
  background-color: lightblue;
  padding: 10px;
}

import React from 'react';
import './style.css';

function Component() {
  return (
    <div className="container">
      This is an example using a normal CSS import.
    </div>
  );
}

export default Component;

2. 인라인 방식

<tag>에 style={{속성}}

import React from 'react';

function Component() {
  const style = {
    backgroundColor: 'lightblue',
    padding: '10px',
  };

  return (
    <div style={style}>
      This is an example using inline styles.
    </div>
  );
}

export default Component;

3. css 모듈

import someStyle from style.module.css하고 태그에 className={someStyle.someclassName}

.container {
  background-color: lightblue;
  padding: 10px;
}

import React from 'react';
import styles from './style.module.css';

function Component() {
  return (
    <div className={styles.container}>
      This is an example using CSS Modules.
    </div>
  );
}

export default Component;

4. style component

npm i styled-components

import styled from "styled-components";

const Father = styled.div`
  display: flex;
`;

const BoxOne = styled.div`
  background-color: teal;
  width: 100px;
  height: 100px;
`;

const BoxTwo = styled.div`
  background-color: tomato;
  width: 100px;
  height: 100px;
`;

const Text = styled.span`
  color: while;
`;

function App() {
  return (
    <Father>
      <BoxOne>
        <Text>Hello</Text>
      </BoxOne>
      <BoxTwo></BoxTwo>
    </Father>
  );
}

export default App;

props사용

const BoxOne = styled.div`
  background-color: ${(props) => props.bgColor};
  width: 100px;
  height: 100px;
`;

const BoxTwo = styled.div`
  background-color: ${(props) => props.bgColor};
  width: 100px;
  height: 100px;
`;

const Text = styled.span`
  color: while;
`;

function App() {
  return (
    <Father>
      <BoxOne bgColor="teal">
        <Text>Hello</Text>
      </BoxOne>
      <BoxTwo bgColor="tomato"></BoxTwo>
    </Father>
  );
}

상속

const ChildStyle = styled(BoxOne)`
	border-radius: 50px;
`;

as

<Text as="a">Hello</Text>

<a>태그로 바꿔줌

속성 부여

const Input = styled().input.attrs({required:true, maxLength:10})`
	border-radius: 50px;
`;

theme

태그로 감싸게 되면 theme={mytheme}이 props 인자로 자동으로 넘거가게 된다.

import {ThemeProvider} from "styled-components";
...

const darkTheme = {
  textColor: "whiitesmoke",
  bgColor: "#111",
};

const lightTheme = {
  textColor: "#111",
  bgColor: "whitesmoke",
}

ReactDOM.render(
	<ThemeProvider theme={darkTheme}>
		<App />
	</ThemeProvider>
  )

const Title = styled.h1`
	color: ${(props) => props.theme.textColor};
`;