[Styling] Next.js Beta Docs

https://nextjs.org/docs/app/building-your-application/styling

Building Your Application: Styling | Next.js

 

 

위 문서에 대한 번역을 진행합니다. 번역시점은 2023-05-08로 공식문서의 추가적인 업데이트가 있을 수 있습니다.

번역기와 챗지피티에 의존해서 번역하고 있습니다. (오역이 발생할 수 있습니다)

한글로 번역하는 것이 더 어색한 단어의 경우 원문을 먼저 표기하겠습니다.

---

Styling

 

Next.js는 다음과 같은 다양한 애플리케이션 스타일 지정 방법을 지원합니다:

 

- 글로벌 CSS: 사용이 간편하고 기존 CSS에 익숙한 사용자에게는 친숙하지만 애플리케이션이 성장함에 따라 CSS 번들이 커지고 스타일 관리가 어려워질 수 있습니다.

 

- CSS 모듈: 로컬 범위의 CSS 클래스를 생성하여 명명 충돌을 방지하고 유지 관리성을 개선하세요.

 

- 테일윈드 CSS: 유틸리티 클래스를 구성하여 신속한 사용자 정의 디자인을 가능하게 하는 유틸리티 우선 CSS 프레임워크입니다.

 

- Sass: 변수, 중첩 규칙, 믹스인 등의 기능으로 CSS를 확장하는 인기 있는 CSS 전처리기입니다.

 

- CSS-in-JS: 자바스크립트 컴포넌트에 직접 CSS를 임베트하여 동적이고 범위가 지정된 스타일링을 구현할 수 있습니다.

 

각 접근 방식에 대한 자세한 내용은 해당 문서를 참조하세요:

---

[Styling] (1) CSS Modules Next.js Beta Docs

[Styling] (2) Tailwind CSS Next.js Beta Docs

[Styling] (3) CSS-in-JS Next.js Beta Docs

[Styling] (4) Sass Next.js Beta Docs