[Next.js] 인프런 강의 "Next.js 필수 개발 가이드 3시간 완성!" 정리(섹션 1: Styling)

섹션 1: Styling

📌 globals.css

• 모든 태그 및 컴포넌트에 공통 스타일 적용한다.
• globals.css 안에서 class는 CSS 라이브러리와의 충돌을 방지하기 위해 사용하지 않는 것이 좋다.
• @media (prefers-color-scheme: dark) {}에서 다크모드 스타일을 설정하면 된다.

 

📌 CSS Module

• CSS 파일을 모듈처럼 사용한다.
• 동일한 클래스 이름을 사용하더라도 다른 컴포넌트, 페이지의 스타일과 충돌(덮어쓰기) 하지 않는다.
• postCSS를 사용하여 클래스 렌더링 시 충돌하지 않도록 클래스 이름에 별도의 문자열을 추가하기 때문이다.
• 클래스를 제거하려면 컴포넌트에 정의한 내용과 해당 클래스가 정의된 파일도 함께 삭제해야 빌드시 번들에 포함되지 않는다. → 테일윈드는 그런 번거로움을 줄여준다.

 

📌 Tailwind CSS

• 스타일링 애플리케이션을 위해 널리 사용되는 CSS 프레임워크
• DaisyUI(Tailwind 위에 구축된 컴포넌트 라이브러리)의 Theme를 이용하면 빠르게 애플리케이션의 스타일을 적용할 수 있다.
• DaisyUI themes : https://daisyui.com/docs/themes/