[Next.js] styling

1. 직접적으로 스타일 추가(인라인)

: 좋은 방법이 아니다!

<nav>
    <Link href="/">
        <a style={{color: "red", fontSize: "20px"}}>Home</a>
    </Link>
    <Link href="/about">
        <a style={{color: "blue", fontSize: "10px"}}>About</a>
    </Link>
</nav>

 

2. CSS Modules

:css 모듈을 사용하려면 .modules.css 파일을 생성해야 한다

NavBar.module.css 👇

.nav {
  display: flex;
  justify-content: space-between;
  background-color: blanchedalmond;
}

css를 사용할 페이지, 컴포넌트에 import 해주기 👇

 

className="nav"가 아닌 className={styles.nav} 를 사용해야 한다(모듈이기 때문에)

<nav className={styles.nav}> 👈
    <Link href="/">
        <a style={{color: "red", fontSize: "20px"}}>Home</a>
    </Link>
    <Link href="/about">
        <a style={{color: "blue", fontSize: "10px"}}>About</a>
    </Link>
</nav>

 

✅ css 모듈 접근 방식의 장점은 무작위로 클래스 이름을 생성하는 데에 있다. 즉, 클래스 충돌에 대한 걱정을 덜어준다

 

개발자 도구

*2개 이상의 클래스를 사용하고 싶을때는?

1) 백틱을 사용 한다

2) 배열을 만들고 .join("") 메서드를 사용한다

 

NavBar.module.css 👇

.link {
  background-color: tomato;
}

.active {
  color: aquamarine;
}

1) 백틱 사용

<Link href="/">
	<a className={`${styles.link} ${styles.active}`}>Home</a> 👈
</Link>

2) join 사용

<Link href="/">
    <a className={[
        styles.link,
        styles.active
    ].join(" ")}>Home</a> 👈
</Link>

개발자 도구

단점: 파일을 따로 생성해야한다. 클래스 네임을 기억해야 한다. 등등

 

 

3. styles JSX

: 사용된 컴포넌트에만 영향을 미친다

<nav>
    <Link href="/">
    	<a>Home</a>
    </Link>
    <Link href="/about">
    	<a className="active">About</a>
    </Link>
    <style jsx>{` 👈 백틱으로 감싼 후 문자열로 나열
        nav {
        	background-color: tomato;
        }
        a {
        	color: white;
        }
        .active { 👈 class도 사용 가능!
        	color: yellow;
        }
    `}</style>
</nav>

✅ css 모듈과 마찬가지로 무작위로 클래스 이름을 생성해 준다

 

개발자 도구

 

*스타일을 전역으로 사용하고 싶다면?!

: global 속성을 사용해라!

<style jsx global>{` 👈 global 속성 사용
    nav {
        background-color: tomato;
    }
    a {
        color: white;
    }
`}</style>

 

 

단점: 컴포넌트 별로 복붙해야 하는 약간의 불편함이 존재 👉 _app.js 이용하자! 

 

*보통 header, side, footer를 공통된 component/ 스타일을 두고 싶을 때 _app.js에 적용시킨다

Component, pageProps는 건들지말자...!

import '../styles/globals.css' 👈

function MyApp({ Component, pageProps }) {
  return (
    <div>
      <Component {...pageProps} />
      <span>hello</span> 👈
      <style jsx global>{` 👈
        nav {
          background-color: tomato;
        }
        a {
          color: white;
        }
        .active {
          color: yellow;
        }
      `}</style>
    </div>
  )
}

export default MyApp

 

 

✏️ style jsx는 styled-component와 유사한데, 개인적으로 styled-component가 더 예쁜 것 같다

 

 

Ref.

https://nomadcoders.co/

노마드 코더 Nomad Coders