1. style jsx

next.js 에서 css를 적용하는 방법으로 모듈 방법과 jsx 방법을 알게 되었다.

jsx 방법은 처음 보는 방법이라 굉장히 생소했는데 tailwind css를 사용하여 포트폴리오 웹사이트를 만들 생각이었기 때문에 이런 방법도 있구나~ 하고 넘어가려고 한다.

• 클래스 이름이 무작위화 된다. (클래스 이름을 만들어줄 필요가 없다)
• 해당 컴포넌트(파일)에만 적용된다.
• <style jsx> 에 global을 추가하면 모든 컴포넌트에 적용된다.

export default function AboutMe() {
  return (
  	<>
  	  <nav>
    	<ul>
        	<li>Home</li>
        </ul>
 	  </nav>
      <style jsx>{`
      	ul {
        	text-decoration: none;
        }
        .active{
        	color: red;
        }
      `}
      </style>
    </>
  )
 }