Styles JSX는 현재 컴포넌트만 scope로 가진다. 그렇게 되면 전역으로 css 속성을 주고 싶은 경우 모든 컴포넌트에 하나하나 입력해야하는데, 그렇게 되면 너무 귀찮아지고 실수가 발생할 수 있어 현실적으로 불가능하다. 그럴때 사용할 수 있는 방법이 global 속성과 _app.js이다. global import NavBar from "../components/NavBar"; const Home = () => { return ( Home ); }; export default Home; jsx 옆에 global 옵션을 준다면 해당 컴포넌트와 자식 컴포넌트, 부모 컴포넌트에게도 영향을 주는 css 속성이 된다. 하지만, 이것 역시 " 사용된 " 컴포넌트를 기준으로 속성이 적용된다. 만약 Home 컴포..

Next.js에서 CSS를 추가하는 방법은 다양하게 있다. 1. style 속성 사용 import Link from "next/link"; import { useRouter } from "next/router"; const NavBar = () => { // ... return ( Home About ); }; export default NavBar; 태그에 존재하는 style 속성을 사용하면 Next.js에서도 똑같이 style을 줄 수 있다. 하지만 이 방법은 재사용에 불편함이 있고, 개인적으로 코드 가독성이 떨어진다고 생각한다. 대신 사용할 수 있는 기능 중 하나가 .module.css 패턴이다. 2. .module.css 패턴 먼저 css 파일을 파일명.module.css로 만들어준다. impor..