-
개요
Nextjs는 global css와 module css방식을 사용한다.
아래는 간단하게 global css에 적용해보는 예제
_app.tsx
'pages/_app.tsx'파일에 있는 내용 확인
import '../styles/globals.css'
기본적으로 'globals.css'를 불러 쓰는 코드가 이미 들어 있다. 추가 수정 없이 그대로 두면 된다.
globals.css
'styles/globals.css'파일 내용 편집
기본적으로 'globals.css'에 예제로 보여주는 내용들이 있다. 참고하고, 필요 없으면 모두 지우고 아래의 테스트 내용을 넣는다.
.MyList1 li { float: left; }
class이름이 MyList1인 list의 li에 정렬 방향은 기본 상하이지만 left로 지정하는 내용이다.
test1.tsx
테스트용 tsx파일을 만들거나 기존 파일에 넣는다.
... return ( <ol className="MyList1"> <li> item1 </li> <li> item2 </li> </ol> );
'NextJs' 카테고리의 다른 글
Nextjs useEffect (0) 2023.01.20 Nextjs Webpack (0) 2023.01.19 Nextjs bodyParser (0) 2023.01.15 Cookie Ex2 (0) 2023.01.13 Css(style) 파일 적용하기(Global, Module) (0) 2023.01.10 UseEffect Ex3 (0) 2023.01.10 UseEffect Ex2 (0) 2023.01.10 UseEffect Ex1 (0) 2023.01.10