๋ชฉ์ฐจ
react module.css :global local css ๋์ ์ ์ฉํ๋ ๋ฐฉ๋ฒ.
classNames/bind๋ฅผ ์ฌ์ฉํ๊ณ ์์ ๋
className={cx("label","labelTst")}
.labelTst๋ app.module.css์ ๋ฑ๋ก.
React Js - Global CSS ์ค์ + styled reset
- css ์ด๊ธฐํ๋ฅผ ์ํด styled-reset ์ค์น
- styled-components๋ local๋ก ๋์ํ๊ธฐ ๋๋ฌธ์ global ํ css๋ฅผ ๋ง๋ค๊ธฐ ์ํด GlobalStyles.js ์์ฑ
- ์ค์น
- NPM์ค์น : npm install styled-reset styled-components
- ์ ์ด์น: yarn add styled-reset styled-components
- ์ฌ์ฉ
Components/GlobalStyles.js
import { createGlobalStyle } from "styled-components";
import reset from "styled-reset";
โ
const globalStyles = createGlobalStyle`
${reset};
a{
text-decoration:none;
color:inherit;
}
*{
box-sizing:boerder-box;
}
body{
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 14px;
background-color:rgba(20,20,20,1);
}
`;
โ
โ
export default globalStyles;
Components/App.js
import React, { Component } from "react";
import Router from "Components/Router";
import GlobalStyles from "Components/GlobalStyles";
โ
class App extends Component {
render() {
return (
<>
<Router />
<GlobalStyles />
</>
);
}
}
โ
export default App;
์ด๋ ๊ฒ ํ๋ฉด button์ด๋ input๋ง๋ค ์์ฑํ ์ฝ๋๊ฐ ์ค์ด๋ฆ.
๋ ๋๋ง ๋๋ ๋ชจ๋ ํฐํธ์ ๊ด์ญ ์ค์ ํ ํฐํธ๊ฐ ์ ์ฉ๋๋ฏ๋ก ์ค๋ณต ์ฝ๋๋ฅผ ์์ฑํ์ง ์์๋ ๋จ.
์ง์ญ ๊ฐ์ด๋์๊ฐ์ ํ๊ณ ๋ ๋ค ๊ตฌ๊ธ์์ ์์ฌ ์๋น์ค๋ก ๋ค์ํ ์ด์ฉ์ ํํ์ ์ฃผ๋ ๊ฒ ๊ฐ์์ ๋ฒ ํ ํ ์คํธ๋ ์ฐธ์ฌํด ๋ณด๊ธฐ๋ก ํ์ด์.
๋ฑํ ๋ฒ ํํ ์คํฐ๋ฅผ ํ๋ค๊ณ ํด์ ๋ญ๊ฐ ๊ธ์ ์ ์ธ ๋๋จํ ํํ์ด ์ฃผ์ด์ง์ง ์์์.
๋ค๋ง ์ ๊ฐ์ ๋ธ๋ก๊ฑฐ๋ค์๊ฒ ๋จ๋ค๋ณด๋ค ํ ๋ฐ ์์์ ์ ํ๋ก๊ทธ๋จ์ ๊ธฐ๋ฅ์ ํ ์คํธํด ๋ณด๊ณ ๊ธ ์ธ ๊ธฐํ๊ฐ ์ฃผ์ด์ง๋ค๋ ๊ฑฐ์ฃ .
์ต์ ๊ตฌ๊ธ๋งต ์ฑ์ธ ๊ตฌ๊ธ ์ง๋์์ ์ฃผ๋ชฉํ ๋งํ ๊ธฐ๋ฅ์ ์ง์ญ ๊ฐ์ด๋์ ์ฐธ์ฌ๊ฐ ํธ๋ฆฌํด ์ก๋ค๋ ์ ๊ณผ ์ง์ญ๊ฐ์ด๋์ ํ๋์ด ํ๋ฐ ํด ์ง์ ๋ฐ๋ผ์ ์ง์ญ ๊ด๋ จ ํนํ ์๋น์ ๋น๋กฏํ ์๋น์ค ์ ์ข ์ ๋ํ ๋ฐ์ดํฐ ์์ง์ด ์๋นํ ๋์ด์ ๊ทธ๊ฒ์ ๊ธฐ๋ฐ์ผ๋ก ํ ๋ณด๋ค ์ ํํ๊ณ ํฅ๋ฏธ๋ก์ด ์ ๋ณด ์ ๊ณต์ด ๊ฐ๋ฅํด์ก๋ค๋ ์ ์ด์ฃ .
๋ฌผ๋ก ํ๊ตญ์์๋ ์์ง ์ง๋ ๋ฐ์ดํฐ ๋ฐ์ถ์ด ๋์ง ์์์ ๋ค์์ด๋ ๋ค์ด๋ฒ์ฒ๋ผ ๊ตญ๋ด๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ ์๋น์ค๋ค์ ๋นํด ์ ํ๋๋ ๊ธฐ๋ณธ์ ๋ณด๊ฐ ์ฌ์ ํ ๋ถ์กฑํ๊ธด ํฉ๋๋ค.
ํ์ง๋ง ์ ์ฒ๋ผ ๊ตฌ๊ธ ๊ฐ์ด๋ ํํ์ ํนํ ์ฌ์ฉ์๋ค์ด ์ด์ฌํ ์ง์ญ์ ๋ณด๋ฅผ ์ฌ๋ฆฐ๋ค๋ฉด....
๋ค์์ด๋ ๋ค์ด๋ฒ๋ ๋ฐ๋ผ๊ฐ๊ธฐ ํ๋ ๋ฐ์ดํฐ์ ์ถ์ ์ด ์ผ์ด๋๊ณ ์ง๋ ๋ฐ์ดํฐ ๋ฐ์ถ์ ์๋ฏธ ์์ด์ง์ง๋ ๋ชจ๋ฆ ๋๋ค.
5์ฒ๋ง ๋ช ์ ์ ๋ฐ๋ง ์๋๋ก์ด๋ ๊ธฐ๋ฐ ์ค๋งํธํฐ์ ๋ค๊ณ ์ ๊ตญ ๋ฐฉ๋ฐฉ๊ณก๊ณก์ ๋๋น๊ธฐ๋ง ํด๋ ๊ตฌ๊ธ์ ์์์ ๋ํ๋ฏผ๊ตญ ๊ตฌ์๊ตฌ์์ ์ ๋ณด๋ฅผ gps๋ก ์ ํํ๊ฒ ์ค์ธกํ ๋ฐ์ดํฐ๋ฅผ ์์ ํ๊ฒ ๋ ํ ๋๊น์.
๋๊ธ