2023.09.15(React JS필기 정리)

SaGo_MunGcci·2023년 9월 15일
0

ReactJS

목록 보기
9/9

Today do list

⦁ styled component



TIL

  • styled component
import React from 'react'
// 스타일컴포넌트 설치
// npm i styled-component
//styled component css 적용 시 자동완성은
//vscode-styled-components 익스텐션을 받으면 됨
import styled from 'styled-components'

// styled component 사용법 잘보기 styled. 뒤에 오는 것은 html 태그가 와야된다.
// 그다음 ``안에는 css코드가 와야한다.
const Father = styled.div`
  display: flex;
`
const BoxOne = styled.div`
  background-color: teal;
  width: 100px;
  height: 100px;
`

const BoxTwo = styled.div`
  background-color: tomato;
  width: 100px;
  height: 100px;
`
const Text = styled.span`
  color: white;
`

const Styledcomponent = () => {
  return (
    <Father>
      <BoxOne>
        <Text>Hello!</Text>
      </BoxOne>
      <BoxTwo></BoxTwo>
    </Father>
  )
}

export default Styledcomponent



Retrospection

  • 포트폴리오를 만들고 이걸 보니 이론적으로 css파일을 따로 만들지 않고도 FE를 구현 가능하지 않을까?

  • 아..... 반응형때문에 안될수도 있겠다...



Tommorrow do list



profile
이리저리 생각만 많은 사고뭉치입니다.

0개의 댓글