클론코딩 강의를 참고하면서 나만의 개인 프로젝트를 실행시키고 있는 중이다
아무래도 페이지, 컴포넌트, 스타일링이 거의 다르기 때문에 강의에서 설명해주지 않는 부분은 내가 직접 찾아야 하는데
오늘 styled-component를 이용해서 styling을 어떻게 주는지에 대한 설명을 들었지만..
만약 스타일링이 정의된 하나의 클래스를 만들어서 여러 요소에 적용시키고 싶으면 어떻게 하지?라는 의문이 생겼다
우선, styles 폴더를 생성한다.
그리고 styles폴더 안에 css파일들을 추가하면 된다
1. 모든 페이지에 공통으로 적용시키고 싶다면 global.css를 이용하자
폰트, body html * a 등.. 모든 페이지에 공통으로 적용되는 스타일링을 주고 싶다면?
styles폴더 안의 global.css파일에 원하는 스타일링을 작성 후, 모든 페이지들에서 공통으로 적용되는 _app.js에 import 시켜준다
styles/global.css 파일
html,
body {
font-family: "Noto Sans KR", sans-serif;
padding: 0;
margin: 0;
}
* {
box-sizing: border-box;
}
a {
color: black;
text-decoration: none;
}
pages/_app.js 파일
import '../styles/global.css';
const Meong = ({Component}) => {
return (
<>
<Head>
<meta charSet="utf-8" />
<title>놀멍쉬멍</title>
<link rel="shortcut icon" href="/icon.png"/>
<link href="https://fonts.googleapis.com/css2?family=Gugi&display=swap" rel="stylesheet"></link>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;400&display=swap" rel="stylesheet"></link>
</Head>
<Component />
</>
);
};
2. 특정 페이지에만 import 하여 class를 주고 싶다면? 파일명. module.css 파일을 만들자!
원래 css파일은 _app.js 파일에서만 import 후 사용이 가능한데 (다른 파일에서 import 후 실행하면 에러가 발생한다)
이럴 땐 모듈로 만들어서 다른 페이지에서도 사용이 가능하다.
나는 login.module.css와 styles.module.css 파일을 만들었다.
styles/login.module.css 파일
.loginForm {
padding: 20px;
}
.buttonWrapper {
text-align: center;
}
.buttonWrapper Button {
margin: 20px 0
}
.buttonWrapper span {
margin-right: 3%;
}
components/LoginForm.js 파일
import login from '../styles/login.module.css';
const LoginForm = () => {
return (
<div className={login.buttonWrapper}>
...
</div>
);
};
export default LoginForm;
코드를 줄여서 넣어봤는데,
login으로 login.module.css를 import 하고
사용할 때는 className에 {import 한 이름. 클래스명}으로 작성해야 적용이 된다.
Ref.
https://nextjs.org/docs/basic-features/built-in-css-support
Basic Features: Built-in CSS Support | Next.js
Next.js supports including CSS files as Global CSS or CSS Modules, using `styled-jsx` for CSS-in-JS, or any other CSS-in-JS solution! Learn more here.
nextjs.org
'IT 개발' 카테고리의 다른 글
| ReactNative 리액트네이티브 시작을 위한 설치목록 (MacOS 환경) (0) | 2022.02.04 |
|---|---|
| [React] Invalid hook call. Hooks can only be called inside of the body of a function component.. 에러 해결방법 (0) | 2021.10.15 |
| [Next.js] Styled-component에러 Warning: Prop className did not match (0) | 2021.10.07 |
| gitignore 적용되지 않을 때 + rm명령어 옵션 (0) | 2021.10.01 |
| 프로젝트 코드 리팩토링 - 태그버튼 관련 js와 trim을 이용한 공백 제거 (0) | 2021.09.29 |
