[Styled Component - 9] styled-reset

styled-reset은 리액트 애플리케이션에서 사용되는 스타일 라이브러리인 

"styled-components"와 함께 사용되는 패키지 중 하나입니다. 

스타일드 컴포넌트는 CSS를 컴포넌트 기반으로 작성할 수 있게 해주는 라이브러리이며, 

styled-reset은 초기 CSS 스타일을 재설정하여 브라우저 간의 일관된 스타일링을 적용하는 데 도움을 줍니다.

설치

npm install styled-reset

적용 예시

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

const GlobalStyle = createGlobalStyle`
  ${reset}
  /* 이곳에 추가적인 전역 스타일을 설정할 수 있습니다 */
`;

function App() {
  return (
    <>
      <GlobalStyle />
      {/* 나머지 컴포넌트들 */}
    </>
  );
}

 

이렇게 하면 styled-reset이 제공하는 초기 스타일이 GlobalStyle 컴포넌트 내에 적용되어, 

모든 HTML 요소들의 초기 스타일이 리셋되고 브라우저 간 일관된 시작점을 갖게 됩니다. 

이후에는 스타일드 컴포넌트를 사용하여 컴포넌트마다 필요한 스타일을 정의할 수 있습니다.