Next.js: 특정 페이지에서 루트 Div __next의 CSS를 변경하는 방법?
소개
Next.js를 사용하면 특정 페이지에서 특정 요소의 CSS를 맞춤 설정해야 할 수 있는 경우가 생길 수 있습니다. 이 블로그 포스트에서는 Next.js 애플리케이션에서 특정 페이지에서 id가 “__next”인 루트 div의 CSS를 변경하는 다양한 방법에 대해 알아보겠습니다. 전역 스타일, 클래스 추가, styled JSX 활용 등 다양한 기술을 살펴보겠습니다. 시작해 봅시다!
1. 전역 CSS 파일 사용하기
로그인 페이지에서 “__next” div에 전역적으로 CSS를 적용하려면 전역 CSS 파일을 생성하고 원하는 스타일을 추가하면 됩니다. 다음 단계를 따르세요:
/* "styles"라는 폴더에 "globals.css"라는 파일을 만들어주세요. */
/* 이 파일은 Next.js 프로젝트의 루트 디렉토리에 둬주세요. */
/* globals.css */
@tailwind components;
@tailwind utilities;
@layer components {
#__next {
@apply h-full bg-red-500;
}
html,
body {
@apply h-full;
}
}
스타일을 적용하려면 전역 CSS 파일을 애플리케이션에 추가해야 합니다:
// 전역 CSS 파일을 불러옵니다.
import '../styles/globals.css';
2. _document.js에서 styled JSX 활용하기
styled JSX를 사용하고자 한다면, <style> 요소에 global 키워드를 추가하여 “__next” div의 스타일을 수정할 수 있습니다. 다음 단계를 따르세요:
// pages/_document.js
import Document, { Head, Main, NextScript } from "next/document";
export default class MyDocument extends Document {
render() {
return (
<html>
<Head />
<body>
<Main />
<NextScript />
<style jsx global>{`
/* 'html, body' 등 다른 전역 스타일... */
#__next {
height: 100%;
}
`}</style>
</body>
</html>
);
}
}
#__next div의 스타일에 height: 100%;를 추가함으로써 로그인 페이지가 마운트될 때 해당 요소의 CSS를 변경할 수 있습니다.
3. 로그인 페이지에 클래스 추가 및 스타일 지정하기
로그인 페이지에서 “__next” div에 수동으로 클래스를 추가하면 클래스를 추가하고 제거함으로써 동적으로 스타일을 적용할 수 있습니다. 다음 단계를 따르세요:
// 로그인 페이지 컴포넌트에서 React를 import 합니다.
import React from 'react';
export default class LoginPage extends React.Component {
componentDidMount() {
document.getElementById('__next').classList.add('login-page');
}
componentWillUnmount() {
document.getElementById('__next').classList.remove('login-page');
}
render() {
return (
<div>
로그인 페이지
<style jsx global>{`
.login-page {
background-color: red;
}
`}</style>
</div>
);
}
}
이 접근 방식에서는 login-page 클래스가 로그인 페이지의 #__next div에 추가되어 해당 요소에 특정 CSS 스타일을 적용할 수 있습니다.
4. Styled JSX 없이 전역 CSS 파일 사용하기
다른 대안으로, JSX를 통해 스타일을 직접 전달하지 않고 전역 CSS 파일을 사용하는 방법이 있습니다. 다음 단계를 따르세요:
/* "global.css"와 같은 이름의 파일을 생성합니다. */
/* global.css */
#__next {
height: 100vh;
}
_app.tsx 파일에서 전역 CSS 파일을 import하는 것을 잊지 마세요:
// 전역 CSS 파일을 불러옵니다.
import '../styles/global.css';
결론
이 블로그 포스트에서는 Next.js 애플리케이션에서 특정 페이지에서 id가 “__next”인 루트 div의 CSS를 변경하는 다양한 방법을 살펴보았습니다. 전역 CSS 파일, styled JSX, 클래스를 추가하고 제거하는 등의 방법을 통해 개별 요소의 스타일을 유연하게 사용자 정의할 수 있는 Next.js의 다양한 옵션을 제공합니다. 이러한 기술을 실험해 보고 프로젝트에 가장 적합한 접근 방식을 선택해보세요. 즐거운 코딩하세요!
