Next.js 14를 제대로 사용해 본 적이 없어서 개인 프로젝트를 시작할 겸~ 프로젝트 세팅하던 중에 styled-normalize에 대해 접하게 되었다!
(reset은 열심히 썼으면서 왜 이제 알아찌.....😶)
매우 짧은 포스팅이 될 것 같지만 기록하는 거에 의의를 둡시당
styled-components
우선 우리가 스타일링 도구로 많이 사용하는 styled-components는 js와 함께 사용되는 css-in-js 라이브러리 중 하나로 react와 많이 사용되는 스타일링 도구이다!
styled-components를 사용하면 다음과 같은 이점이 있다.
- 컴포넌트 지향: 각각의 컴포넌트에 대해 스타일을 정의한다
- 동적 스타일링: prop를 활용하여 동적으로 스타일을 변경할 수 있다
- 전처리기 사용: sass나 less와 같은 전처리기 문법을 사용할 수 있다
- 글로벌 스타일링: 글로벌 스타일을 전역으로 적용해 테마를 쉽게 변경할 수 있다
Reset vs Normalize
💡 Reset
styled-reset 은 모든 요소에 대한 스타일을 완전히 제거하고 초기 상태로 되돌린다. 이는 브라우저에 내장된 스타일을 완전히 제거하고 다시 스타일을 적용할 때 사용된다.
보통 웹 애플리케이션의 특정 부분에서 사용된다. 예를 들어 특정 컴포넌트에서만 초기 스타일을 제거하는 경우에 유용하다. 모든 브라우저에서 동일한 초기 스타일을 적용하고자 할 때 선택할 수 있다!
우리가 주로 사용했던 예시를 보자
${reset}
body {
margin: 0;
padding: 0;
}
a {
text-decoration: none
}
...이런식으로 초기화를 해준다 생각하고 스타일을 전역으로 적용해주고는 했다.
💡 Normalize
코드를 작성하는 방법에는 차이가 거의 없지만! styled-normalize의 경우 웹 브라우저 간에 스타일을 일반화하여 동일한 시작점을 제공하는 데에 중점을 둔다. 이는 브라우저 간의 기본 스타일의 차이를 줄이고 일관된 레이아웃을 구축하는 데에 사용한다. 프로젝트의 기본 스타일을 정의하고 이 스타일을 유지하면서 일부 스타일에만 손을 대고자 할 때 유용하다@!
일반적으로 브라우저의 모든 요소에 대해 일관된 스타일을 적용하는 데에 사용되며, 이는 폰트, 간격, 크기 및 기타 요소의 일관성을 유지하는 데에 도움이 된다.
styled-normalize가 일반적으로 브라우저 간의 일관된 스타일을 제공하기 위해서 더 적절한 선택이라고 하기는 하지만, 개발자의 선호도 혹은 프로젝트의 요구 사항에 따라 다를 수 있다..!
간단한 예시를 봅시당. 사용 방법은 reset과 동일하다.
${normalize}
body {
font-family: 원하는 폰트;
font-size: 16px;
color: black;
}
button {
padding: 10px 20px;
border: none;
cursor: pointer;
}
...Q. 그럼 혹시 두 가지의 특성을 고려해서 같이 사용할 수는 있나요?
A. 사용 가능합니다! 단, 스타일 간의 충돌이 발생할 수 있으므로 두 라이브러리를 사용하면서 충돌에 유의하며 잘 관리해야 합니다. 프로젝트 규모와 복잡성에 따라서 스타일의 요구사항이 달라질 수 있으므로 규모가 작은 프로젝트라면 하나만 선택해도 충분할 수 있지만, 프로젝트 규모가 커진다면 두 라이브러리를 조합해서 사용하면 일관성을 잘 유지할 수 있습니다!
