[ 언어·프레임워크/Next.js ]
[Next.js] 인프런 강의 "Next.js 필수 개발 가이드 3시간 완성!" 정리(섹션 1: Styling)
2024-02-06 09:12:12
섹션 1: Styling 📌 globals.css 모든 태그 및 컴포넌트에 공통 스타일 적용한다. globals.css 안에서 class는 CSS 라이브러리와의 충돌을 방지하기 위해 사용하지 않는 것이 좋다. @media (prefers-color-scheme: dark) {}에서 다크모드 스타일을 설정하면 된다. 📌 CSS Module CSS 파일을 모듈처럼 사용한다. 동일한 클래스 이름을 사용하더라도 다른 컴포넌트, 페이지의 스타일과 충돌(덮어쓰기) 하지 않는다. postCSS를 사용하여 클래스 렌더링 시 충돌하지 않도록 클래스 이름에 별도의 문자열을 추가하기 때문이다. 클래스를 제거하려면 컴포넌트에 정의한 내용과 해당 클래스가 정의된 파일도 함께 삭제해야 빌드시 번들에 포함되지 않는다. → 테일윈드..