[React] styled-reset

웹사이트 개발을 하다보면 브라우저마다 기본적으로 설치되어 있는 스타일이 달라서 거슬리는 경우가 많다. 

이런 경우 브라우저에서 기본적으로 제공하는 스타일을 초기화시켜 호환성을 맞춰주는 작업이 필요하다. 

 

이때 사용하는 것이 바로 styled-reset이다. 

 

사용하는 방법 

Yarn 

yarn add styled-reset

 

코드 적용하기 

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

const GlobalStyle = createGlobalStyle`
    ${reset}
    
    * {
        // ...
    }

    body {
        margin: 0
    }

    a {
        text-decoration: none;
        outline: none;
    }

    a:hover, a:active {
        text-decoration: none;
        background:none;
    }
`;

export default GlobalStyle;

styled-components의 createGlobalStyle과 함께 사용하였다. 

styled-reset을 사용한다고 모든 태그가 내 입맛대로 초기화가 되는 것이 아니기 때문에 추가적으로 세팅이 필요하다. 

 

이것을 통해서 브자우저마다 설정된 기본값을 차이를 없애주고 동일한 스타일을 쉽게 설정이 가능하다.