Styled-components

설치 방법

1. 터미널에서 yarn add styled-components 입력
2. 편의성을 위해 VScode 확장프로그램:styled-components 설치

1. Styled-components

:CSS-in-JS 방식을 사용하여 컴포넌트를 꾸밀 수 있게 도와주는 패키지

CSS-in-JS란

: 자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식
: 조건부 스타일링(if, switch, 삼항연산자 등) 작성 가능

패키지란, React에 없는 기능이지만 우리가 추가로 가져와서 사용할 수 있는 라이브러리(써드파티) 프로그램, 이러한 패키지들을 설치 및 관리하는 관리자로서 npm, yarn이 존재

2. GlobalStyles(전역 스타일링)

: 공통적으로 들어가야 할 스타일을 적용해야 할 필요도 있습니다. 그럴 경우 ‘전역적으로(globally)’ 스타일을 지정한다.

1. createGlobalStyle 선언하여 사용

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  body {
    font-family: "Helvetica", "Arial", sans-serif;
    line-height: 1.5;
  }
`;

 export default GlobalStyle; 

2. GolbalStyles를 아래의 App.jsx파일에 적용

import GlobalStyle from "./GlobalStyle";
import BlogPost from "./BlogPost";

function App() {
	const title = '전역 스타일링 제목입니다.';
	const contents = '전역 스타일링 내용입니다.';
  return (
    <>
      <GlobalStyle />
      <BlogPost title={title} contents={contents} />
    </>
  );
}

export default App;

3.css reset이란

:브라우저는 기본적으로 default style을 제공하며 다양한 웹브라우저들은 저마다 조금씩은 다른 default style을 사용한다. 이를 초기화하고 우리가 정하는대로만 표현되는 것이 중요하다.

• 초기화 하는 방법은 여러가지 존재한다.
  
  

1. reset.css 파일 생성 후 아래의 코드를 복사, 붙여넣기

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;
}

2. index.jsx의 import 부분에 reset.css 삽입

import "./reset.css";