[React] Styled Components - GlobalStyles (전역스타일링) / CSS RESET

styled component 외에 스타일링 할 수 있는 또 다른 방법이 있는데

바로 🔥 GlobalStyles  (전역스타일링) 이다

 

 

 

 

▼  TestPage.jsx

우선 TestPage.jsx 라는 컴포넌트에 스타일을 적용한다

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

//부모 컴포넌트에서 받은 정보를 props한다
function TestPage(props) {
  return (
    //리렌더링
    <Wrapper>
      {/* Title 컴포넌트에서 정보를 받아서 렌더링
        {} 안에 부모컴포넌트 정보 받아서 렌더링 */}
      <Title>{props.title}</Title>
      <Contents>{props.contents}</Contents>
    </Wrapper>
  );
}

const Title = styled.h1`
  font-size: 1.5rem;
  /* 겹치는 부분 */
  /* font-family: "Helvetica", "Arial", sans-serif;
  line-height: 1.5; */
  margin: 0;
  margin-bottom: 8px;
`;

const Contents = styled.p`
  margin: 0;
  /* 겹치는 부분 */
  /* font-family: "Helvetica", "Arial", sans-serif;
  line-height: 1.5; */
  font-size: 1rem;
`;

const Wrapper = styled.div`
  border: 1px solid black;
  border-radius: 8px;
  padding: 20px;
  margin: 16px auto;
  max-width: 400px;
`;

export default TestPage;

 

  font-size: 1.5rem;
  font-family: "Helvetica", "Arial", sans-serif;

 

 

 

위 코드에서 보면 알 수 있듯이 겹치는 스타일이 있다!

이렇게 겹치는 스타일을 계속 쓰다보면 비효율적이다

그렇기 때문에 겹치는 스타일 부분만 따로 빼서 컴포넌트를 만들어서 

전역에 뿌려주면 간단하게 코드를 작성할 수 있을 것이다

 

 

 

 

▼  GlobalStyle.jsx

GlobalStyle.jsx라는 컴포넌트를 만들어 겹치는 스타일에 대한 코드를 작성하고

해당되는 태그에 적용시켰다

 

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
/* body 태그 밑으로 모든 태그에 폰트 적용 */
    body {
        font-family: "Helvetica", "Arial", sans-serif;
        line-height: 1.5;
    }
`;

export default GlobalStyle;

 

 

App.jsx 파일에서는  GlobalStyle.jsx을 import해서 props를 받으면 

간단하게 적용시킬 수 있다

 

---

 

 

🔥CSS RESET

 

 

우리는 태그의 성격에 맞게 때에 따라 달리 쓰는데

예를 들어 <h3>는 제목, <p>는 문단 등이 있다

그리고 이런 태그들은 브라우저가 기본적으로 제공하는 CSS 스타일이 있다

 

 

예를 들어 <p>는 기본적으로 위아래로 margin 값이 16px이 적용된다

그리고 <h3>는 제목임을 강조하는 성격으로 글자가 더욱 진하게 적용된다

 

 

 

 

 이를 제거하기 위한 방식은 CSS RESET 을 사용하면 된다

 

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값을 초기화 해준다

 

 

 

 

 

---