Dev-LOg 4月4日

6259 ワード
テキストリンク

今日は何をしましたか。

  • 学習

    • Styled Components

  • 天命素子とは何ですか?
    CSSファイルではなくJavaScriptで作成された構成部品に、代表的なCSS-in-JSライブラリを直接挿入するスタイルテクニックです.
    Template Literal(「`,$,{}は式を表す」)を使用してスタイルを指定したり、propsを動的に取得したり、
    • を使用したりすることができます.
  • 選定理由?
    1)個別のCSSファイルを作成する必要がなく、ファイル管理が容易である.
    2)文書名,任命類名などで悩む時間が減る.
    3)構成部品での修正により、ファイル移動が少なく、作業が容易になります.
    4)出口に出てから使用することもできます.
    • 取り付け
    • 자바스크립트 
npm i styled-components
타입스크립트 
npm i --save-dev @types/styled-components
  • 使用例
    参考になるブログ 
    • 버튼 만들기 예제
import React from 'react';
import styled, { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    margin: 50px;
    padding: 50px;
    background-color: black;
  }
`;

const Container = styled.div`
  background-color: lightgray;
  width: 100%;
  height: 100vh;
`;

const Button = styled.button`
  color: white;
  min-width: 120px;

  /* props로 넣어 준 값을 직접 전달해 줄 수 있습니다. */
  background-color: ${(props) => props.color || 'blue'};

  /* & 문자를 사용하여 Sass 처럼 자기 자신 선택이 가능합니다. */
  &:hover {
    background-color: white;
    color: black;
  }
  & + button {
    margin-left: 1rem;
  }
`;

export default function App() {
  return (
    <Container>
      <GlobalStyle />
      <Button>버튼1</Button>
      <Button color='red'>버튼2</Button>
    </Container>
  );
}

    今日は何か困ったことがありますか。

  • CSSが一番難しい本当...

    • 明日は何をするべきですか。

  • 学習反応型ネットワーク
    • Django 3
    jquery mobile validation