![[Next.js] Styles 사용 방법](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FE8YNh%2FbtsBrMyrv3K%2FAAAAAAAAAAAAAAAAAAAAANTopPEiiUFqHnk2REI42azEbOhLkcObE2pG5GALHlR-%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3Dmm2xb7qY79PJ3HTqv8yd25CnGPo%253D)
Frontend/Next.js2023. 3. 11. 21:00[Next.js] Styles 사용 방법
Next.js에서 스타일 적용하는 방법에 대해 알아보겠습니다. CSS-in-JS 가장 간단한 방법은 인라인 스타일입니다. export default function Home() { return ( Hello ); } CSS Modules Next.js는 [name].module.css 파일 명명 규칙을 사용하여 CSS Module을 지원합니다. Common.module.css 파일을 생성하고 스타일을 아래와 같이 작성합니다. 중요한 것은 .module.css 패턴을 사용하는 것입니다. .nav { display: flex; justify-content: space-between; background-color: red; } .text { color: blue; } 생성된 module을 import 해서 ..