gatsby의 작업 내역

gatsby 입문 자습서를 다루는 0. 개발 환경 설정
gatsby 입문 튜토리얼을 해내다 1. 개츠비 빌딩 블록에 대해 알아 (1)
gatsby 입문 튜토리얼을 해내다 1. 개츠비 빌딩 블록에 대해 알아 (2)
이번: gatsby 입문 튜토리얼을 해내다 2. 개츠비의 스타일링의 개요
gatsby 시작하기 튜토리얼 3. 중첩 된 레이아웃 구성 요소 만들기
gatsby 입문 자습서 4. 개츠비 데이터
gatsby 시작하기 자습서 5. 소스 플러그인과 쿼리 된 데이터 렌더링
gatsby 입문 튜토리얼을 해낸다 6. 변압기 플러그인※Transformer plugins의 google 번역
gatsby 입문 튜토리얼을 다루는 7. 프로그래밍 방식으로 데이터에서 페이지 만들기
gatsby 입문 자습서 8. 게시할 사이트 준비
gatsby 입문 블로그 만들어서 서버에 올려보자

튜토리얼

이번에 실시하는 gatsby의 튜토리얼은 이쪽
htps //w w. tsbyys. 코 m/트리어 l/파 rt-ぉ/
개츠비 스타일링의 개요를 알 수 있는 것 같습니다.

Creating global styles with standard CSS files

Create a new Gatsby site

새로운 gatsby 사이트를 만듭니다.
다음을 실행gatsby new tutorial-part-two https://github.com/gatsbyjs/gatsby-starter-hello-worldcd tutorial-part-two

Add styles to a CSS file

src 아래에 styles 디렉토리 만들기
styles 아래에 global.css를 만들고 아래

src/styles/global.css

html {
  background-color: lavenderblush;
}

Include the stylesheet in gatsby-browser.js

tutorial-part-two 디렉토리 바로 아래에 gatsby-browser.js를 작성하고 다음을 설명합니다.

gatsby-browser.js

import "./src/styles/global.css"

// or:
// require('./src/styles/global.css')

다음 명령으로 사이트 시작gatsby develop※tutorial-part-two 디렉토리에서 실행

라벤더 색상 확인
이것은 디렉토리 gatsby-browser.js

Using component-scoped CSS

구성 요소에 대한 CSS 모듈을 만듭니다.

Build a new page using CSS Modules

src 아래에 components 디렉토리 만들기
src/components/container.js를 만들고 다음을 설명합니다.

src/components/container.js

import React from "react"
import containerStyles from "./container.module.css"

export default function Container({ children }) {
  return <div className={containerStyles.container}>{children}</div>
}

src/components/container.module.css를 만들고 다음을 설명합니다.

src/components/container.module.css

.container {
  margin: 3rem auto;
  max-width: 600px;
}

튜토리얼에서는 이하라고 기재되어 있으므로 초대사라고 생각합니다.
: 파일 이름이 일반 .css 대신 .module.css로 끝나는 것을 볼 수 있습니다. 이것은이 CSS 파일을 일반 CSS가 아닌 CSS 모듈로 처리하도록 Gatsby에 지시하는 방법입니다. 』
※google 번역입니다.
src/pages/about-css-modules.js 를 작성해, 이하를 기술.

src/pages/about-css-modules.js

import React from "react"

import Container from "../components/container"

export default function About() {
  return (
    <Container>
      <h1>About CSS Modules</h1>
      <p>CSS Modules are cool</p>
    </Container>
  )
}

http://localhost:8000/about-css-modules/ 시작

오, 굉장해! container.js로 쓴 div는 어떻게 about.js의 내용이 기재되어 있다.

Style a component using CSS Modules

구성 요소 스타일 만들기
src/pages/about-css-modules.module.css 를 작성해, 이하를 기술.

src/pages/about-css-modules.module.css

.user {
  display: flex;
  align-items: center;
  margin: 0 auto 12px auto;
}

.user:last-child {
  margin-bottom: 0;
}

.avatar {
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  margin: 0;
}

.description {
  flex: 1;
  margin-left: 18px;
  padding: 12px;
}

.username {
  margin: 0 0 12px 0;
  padding: 0;
}

.excerpt {
  margin: 0;
}

src/pages/about-css-modules.js에 다음을 기술.

about-css-modules.js

import React from "react"
import styles from "./about-css-modules.module.css"←これ追記
import Container from "../components/container"

console.log(styles)←これ追記

아무래도 콘솔에 튜토리얼과 비슷한 로그가 나오고 있기 때문에 OK일 것이다.

또한 src/pages/about-css-modules.js에 추가

src/pages/about-css-modules.js

import React from "react"
import styles from "./about-css-modules.module.css"
import Container from "../components/container"

console.log(styles)

↓ここから
const User = props => (
  <div className={styles.user}>
    <img src={props.avatar} className={styles.avatar} alt="" />
    <div className={styles.description}>
      <h2 className={styles.username}>{props.username}</h2>
      <p className={styles.excerpt}>{props.excerpt}</p>
    </div>
  </div>
)
↑ここまで追記

export default function About() {
  return (
    <Container>
      <h1>About CSS Modules</h1>
      <p>CSS Modules are cool</p>
      ↓ここから
      <User
        username="Jane Doe"
        avatar="https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/128.jpg"
        excerpt="I'm Jane Doe. Lorem ipsum dolor sit amet, consectetur adipisicing elit."
      />
      <User
        username="Bob Smith"
        avatar="https://s3.amazonaws.com/uifaces/faces/twitter/vladarbatov/128.jpg"
        excerpt="I'm Bob Smith, a vertically aligned type of guy. Lorem ipsum dolor sit amet, consectetur adipisicing elit."
      />
      ↑ここまで追記
    </Container>
  )
}

오, 튜토리얼대로♪
User를 정의해 두면 반복 사용할 수 있어 module.css도 적용할 수 있을 정도로.
어쩌면 반복 처리와 데이터를 만들어 사용해 주겠지.
앞으로 나올까?

이번에는 이상.

고마워요.