🐰
Megaptera Frontend Course
  • Megaptera Frontend Course
  • 1주차
    • 1. 개발환경
    • 2. TypeScript
    • 3. React
    • 4. Testing Library
    • 5. Parcel & ESLint
  • 2주차
    • 1. JSX
  • 3주차
    • 1. React Component
    • 2. React State
  • 4주차
    • 1. Express
    • 2. Fetch API & CORS
    • 3. React Hook
    • 4. useRef & Custom Hook
    • 5. usehooks-ts
  • 5주차
    • 1. TDD
    • 2. React Testing Library
    • 3. MSW
    • 4. Playwright
  • 6주차
    • 1. External Store
    • 2. Tsyringe
    • 3. Redux 따라하기
    • 4. usestore-ts
  • 7주차
    • 1. Routing
    • 2. Routes
    • 3. Router
    • 4. Navigation
  • 8주차
    • 1. Design System
    • 2. Style Basic
    • 3. CSS in JS
    • 4. styled-components
    • 5. props와 attrs
    • 6. Global Style & Theme
  • 9주차
Powered by GitBook
On this page
  • CSS 설정 : class
  • CSS 설정 : inline style
  1. 8주차

2. Style Basic

CSS 설정 : class

<style>
  .greeting {
    color: #00F;
  }
</style>

CSS 설정 : inline style

css를 자바스크립트 객체로 만들어서 전달

export default function Greeting() {
  const style = {
    color: '#00F',
  };

  return (
    <p style={style}>
      Hello, world!
    </p>W
  );
}
export default function Greeting() {
  return (
    <p
      style={{
        color: '#00F',
      }}
    >
      Hello, world!
    </p>
  );
}
Previous1. Design SystemNext3. CSS in JS

Last updated 2 years ago