브라우저마다 기본적인 default style이 적용되어있기 때문에 사용자들에게 동일한 화면을 보여주기위해서는 default style을 제거해주어야 한다.
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;
}위 코드를 css파일을 만들어 넣어주고, 전역으로 사용이 가능한 index.js나 index.html에 적용시켜주면 default style이 제거된다.
두번째로 styled-components에서 사용되는 방법인데 위와같이 전역으로 적용될 수 있는 App.js나 index.js에 사용하면된다.
import { createGlobalStyle } from 'styled-components';
import Router from './Router';
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, 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 (
<>
<GlobalStyle />
<Router />
</>
);
}
export default App;styled-components의 createGloblaStyle을 사용하여 전역적으로 defaultStyle을 제거해준 모습이다.
폰트 적용방법
위 링크에서 원하는 폰트를 고른 후
스타일 태그 안의 import부분을 복사하여
const GlobalStyle = createGlobalStyle`
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');
body{
font-family: 'Nanum Gothic', sans-serif;
}
`;이렇게 createGlobalStyle안에 넣어주면 전역으로 적용이 되나, 아래와같이 경고가 출력된다.
public폴더의 index.html에서의 <head>안에 작성해달라는 경고였다.
'1차 공부 > 공부한 자료' 카테고리의 다른 글
| typescript 공부 5 theme (0) | 2023.01.02 |
|---|---|
| typescript 공부 4 (0) | 2023.01.02 |
| typescript 공부 3 (0) | 2023.01.02 |
| typescript 공부 2 (0) | 2023.01.02 |
| typescript 공부1 (0) | 2023.01.02 |