styled-components 자주쓰는 표현, 기본

 

styled.button : <button>에 대한 스타일 정의 
&.hover == .button.hover
& + & == .button + .button
: button끼리 붙어 있을 때
&:hover { color: red; }
& ~ & { color: tomato; // 건너서 있을때 - <Button> <div> <Button> }
& + & { color: lime; // 바로 옆에 있을때 }

 

**미디어쿼리(화면 크기나 환경에 따라 웹사이트 변경하는 기술)**

 

(1) 미디어쿼리 기본문법: @media [only 또는 not] [미디어유형] [and 또는 ,콤마] (조건문) {실행문}
- 미디어 유형: all, print, screen, tv, projection 등
- @media A and B {실행문} , @media A, B{실행문}
- @media (min-width: 320px) and (max-width: 768px) {실행문}
- @media all and (min-width: 320px){#wrap{width: 30%; background: #00d2a5;}} – 이렇게 몇 개 만들어 조절
(device-width(height), orientation(기기화면방향), aspect-ratio(화면비율), color(기기비트수), grid(1:그리드방식)
(2) 미디어쿼리 적용방안: link태그로 CSS파일 연결(확실?)
(3) 적용시 유의사항: min사용시 반드시 크기 작은순서대로, max사용시 반드시 크기 큰 순서대로 작성

 

**뷰포트**

(1) 뷰포트: 화면에서 실제 내용이 표시되는 영역(데스크톱: 사용자가 설정한 해상도, 스마트기기: 기본설정값)
(2) <meta name=”viewport” content=”width=device-width, initial-scale=1(초기배율설정), minimum-scale=1(최소축소비율설정, 기본값은 0.25), maximum-scale-1(최대확대비율설정, 기본값은 5), user-scalable=no(확대/축소여부설정)”>

**하위 스타일드 컴포넌트에 CSS적용: ${Name}을 활용하여 클래스와 동일하게 사용**

    const ChildDiv = styled.div`
    margin: 30px 30px;`;
    const ParentDiv = styled.div`
    margin-bottom: 30px;
    ${ChildDiv} {
    margin: 20px 0;
    }`;

**하위 스타일드 컴포넌트에 CSS적용**

    export  const  Items  = styled.ul`
    li  {
    padding:  10px  12px;
    cursor:  pointer;
    font-size:  1.4rem;
    line-height:  1.42857;
    color:  rgba(0, 0, 0, 0.6);}`

 **속성 이어받기1**

    // Create an Input component that'll render an <input> tag with some styles
    const Input = styled.input`
      padding: 0.5em;
      margin: 0.5em;
      color: ${props => props.inputColor || "palevioletred"};
      background: papayawhip;
      border: none;
      border-radius: 3px;
    `;
    
        // Render a styled text input with the standard input color, and one with a custom input color
    render(
      <div>
        <Input defaultValue="@probablyup" type="text" />
        <Input defaultValue="@geelen" type="text" inputColor="rebeccapurple" />
      </div>
    );

 **속성 이어받기2**

const Button = styled.button`
          /* Adapt the colors based on primary prop */
          background: ${props => props.primary ? "palevioletred" : "white"};
          color: ${props => props.primary ? "white" : "palevioletred"};
        
          font-size: 1em;
          margin: 1em;
          padding: 0.25em 1em;
          border: 2px solid palevioletred;
          border-radius: 3px;
        `;
        render(
      <div>
        <Button>Normal</Button>
        <Button primary>Primary</Button>
      </div>
    );

 

 

**3) antd + styled-component**

  import styled from  'styled-components';
    
    import  { Form, Input, Button }  from  "antd";
    const  {  Item,  }  = Form
    const  {  TextArea  }  = Input
    export  const  StyledItem  =  styled(Item)`
    `;
    
    export  const  StyledTextArea  =  styled(TextArea)`
    position:  relative;
    margin:  0;
    `;
    
    export  const  StyledButton  =  styled(Button)`
    position:  absolute;
    margin:  0;
    bottom:  -40;
    z-index:  1;
    `
    
    import { StyledButton, StyledTextArea } from './styles';
        <Form onFinish={onSubmitComment}>
          <Form.Item>
            <StyledTextArea
              value={commentText}
              onChange={onChangeCommentText}
              row={4}
            />
          </Form.Item>
        </Form>