해당 글은 프론트엔드를 공부하면서 기록 목적으로 작성한 내용입니다.
잘못된 내용이 있다면 제보 부탁드립니다. 🙇♂️
이번에 웹접근성과 UI 설계법을 공부하면서 TypeScript를 적용한 React 프로젝트에서 Reset CSS를 적용하는 방법을 기록하고자 한다.
먼저, 타입스크립트를 세팅한 React 프로젝트를 준비한다.
yarn create react-app 프로젝트명 --template typescript
첫번째로는 styled-reset
라이브러리를 사용하여 간편하게 스타일을 초기화 할 수 있는 방법이다.
yarn add styled-reset
아래 첨부 자료와 같이 h1
태그를 사용하였음에도 스타일이 초기화된 것을 볼 수 있다.
//App.tsx
...
import { Reset } from 'styled-reset'
const App = () => (
<>
<Reset />
<h1>이것은 제목이다.</h1>
<>
)
두번째 방법은 styled-components
라이브러리를 통해 GlobalStyle
을 만들어 스타일을 초기화 시키는 방법이다.
yarn add styled-components @types/styled-components
이번에는 CSS 초기화 뿐만 아니라 추후 다크모드 사용까지 고련한 방법에 대한 코드를 기록해본다.
Reset CSS 코드
https://meyerweb.com/eric/tools/css/reset/
//index.tsx
...
import { ThemeProvider } from "styled-components";
import { theme } from "./theme";
...
root.render(
<>
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>
</>
);
//theme.ts
import "styled-components";
declare module "styled-components" {
export interface DefaultTheme {
textColor: string;
bgColor: string;
accentColor: string;
}
}
//styled.d.ts
import { DefaultTheme } from "styled-components";
export const theme: DefaultTheme = {
bgColor: "#2f3640",
textColor: "#f5f6fa",
accentColor: "#4cd137",
};
//App.tsx
...
import { createGlobalStyle } from "styled-components";
const GlobalStyle = 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, menu, 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,
main, 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, main, menu, nav, section {
display: block;
}
/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {
display: none;
}
body {
line-height: 1;
}
menu, 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;
}
//style custom
* {
box-sizing: border-box;
}
body {
font-family: 'Source Sans Pro', sans-serif;
background-color: ${(props) => props.theme.bgColor};
color: ${(props) => props.theme.textColor}
}
a {
text-decoration: none;
}
`;
function App() {
return (
<>
<GlobalStyle />
<h1>Reset CSS 와 Theme를 적용한 방법이다.</h1>
</>
);
}
export default App;
참고: 노마드 코더 - React JS 마스터클래스
https://nomadcoders.co/react-masterclass