오늘은 next의 css설정에 대해서 알아보겠습니다.
우서 가장 잘알려진 module을 이용한 방법
ack/ack.module.css 만들고
.button {
background-color: aqua;
}
작성
ack/ack1.js
import style from "./ack1.module.css";
export default function popo() {
return (
<div>
<button className={style.button}>메롱</button>
</div>
);
}
작성
이렇게 import 사용할이름 from "위치"
이렇게 해서 className 에 사용할이름.클래스이름 이렇게 적으면 작동 됩니다.
이렇게 하면 다른 요소랑 이름이 겹쳐도 자동으로 이름이 설정되어서 중복되지않고 설정 가능합니다.
단점으로는 파일이 두개다보니까 왔다 갔다하면서 확인해야되는 귀찮음은 존재하고 있어요
이렇게 제대로 동작된게 보이고
이런시긍로겹치지 않도록 이름이 자동설정된게 보이실겁니다.
두번째는 style jsx활용
ack/ack1.js
export default function popo() {
return (
<div>
<button className="button">메롱</button>
<style jsx>
{`
.button {
background-color: aqua;
}
`}
</style>
</div>
);
}
작성
<style jsx></style> 하고 대괄호{} 그안에 ` 백틱 ~있는부분에 있는거 하고 그사이에 css를 작성하면 됩니다.
우선 이것의 장점은 페이지가하나고 import안해도되 그리고 className적는것도 더 단순해 단점으로는 길어지면
위 아래로 스크롤해서 찾아야되는 단점이 있지만 그것도 창두개 키면 되니까 크게 단점이라고 할수는 없지 ㅎㅎ
그럼이제 제대로 동작했는지 확인해보겠습니다.
이렇게 이름이 자도으로 들어간걸 확인할수 있습니다.
그럼이제 여기서 그럼 전체적으로 적용하고 싶으면 어떡하나요?
할수 있지 그래서 나온게 바로 jsx global
가장 상위폴더에 components/nav.js 만들고 내용 작성
import Link from "next/link";
export default function nav() {
return (
<div>
<Link href="/">
<a className="click">메롱</a>
</Link>
<Link href="/ack/ack1">
<a className="click">메롱1</a>
</Link>
</div>
);
}
ack/ack1.js
import Nav from "../../components/nav";
export default function popo() {
return (
<div>
<Nav />
<button className="button">메롱</button>
<style jsx>
{`
.button {
background-color: aqua;
}
`}
</style>
<style jsx global>
{`
.click {
color: aqua;
}
`}
</style>
</div>
);
}
작성
이렇게 되면 global에 잇는 요소는 해당 페이지에 포함되어있는 모든 component에 적용이되고 그냥 jsx는 직접적으로 해당 페이지에 있는 요소에 적용됩니다.
이런식으로 해당페이지 내부에 있는 모든요소 공통 부분 css를 작성할수 있습니다.
그럼 이번에는 전체적으로는 어떻게 적용하지?? 라고 할수 있습니다 그럼 이제 그걸 알아 보겠습니다.
pages/_app.js 만들어주세요
export default function App({ Component, pageProps }) {
return (
<>
<Component {...pageProps} />
<style jsx global>
{`
.click {
color: aqua;
}
`}
</style>
</>
);
}
작성
_app.js 파일은 모든 페이지에 공통으로 들어가는 부분을 작성하는 것입니다.
<Component {...pageProps} />이부분에 우리가 각 페이지마다 작성한 내용이 들어오고 이걸기준으로 아래 위에 넣을 부분을 작성하면 됩니다. pageProps는 호출될때 전달되는 props를 다시 component에 다시 넣어주는 것입니다.
주의:{}안에있는 component pageProps는 특정 객체에 들어있는 key값이므로 똑같이 적어주셔야되요
그리고 jsx global을 작성해주소 ack1.js에는 global을 지워주겠습니다.
그리고 보면
이렇게 제대로 동작된것을 볼수 있습니다.
오늘 이렇게 style에 대해서 알아보았습니다.
