2022/04/21 styled components로 전역 스타일 관리

협업하면서 styled-components의 createGlobalStyle을 통해 전역으로 스타일 관리를 할 수 있다는 것을 알게 되었다.

styled-components와 styled-reset 라이브러리 설치 후 다음과 같은 설정을 적용하여 모바일 환경에 최적화된 화면 width를 구성했다. (최소 반응형 레이아웃 기준 모바일 768px)

*이 아닌 body에서 max-width, margin, width를 설정해야 최대 768px의 가운데에 위치한 화면이 구성된다.

import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset';

const GlobalStyles = createGlobalStyle`
    ${reset}
    *{
      
        box-sizing: border-box;

        
    }
    body,html,#root { 
        max-width: 768px;
        margin: 0 auto;
        width: 100%;
    }; 

`;

export default GlobalStyles;

https://jiyuunyang.tistory.com/60

CSS 반응형 레이아웃 너비 기준

https://styled-components.com/

styled-components

https://www.npmjs.com/package/styled-reset

styled-reset