Nextjs Css 적용 기초 수준 Ex

 

개요

Nextjs는 global css와 module css방식을 사용한다.

Css(style) 파일 적용하기

 

아래는 간단하게 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>
  	);