All Articles

styled-components

prologue

웹혹은 모바일프로젝트를 하면 스타일가이드 라는것을 만든다.
업계마다 조금씩 용어가 다를수있는데 웹스타일가이드(WSG) 라고해서 html의 태그요소와 클래스를 정의해둔다. 디자인적인 가이드이면서, 퍼블리셔들이 공통클래스를 정의해서 PL이 정의해두면 나머지는 페이지를 만들어내는것이다.
예들들면

//Heading
p{font-size:24px}
p.warn{ 빨간색, 정신차려, }
div.desc{설명글,자세히 읽어등..}

나름 괜찮은방법이긴하지만, React로 넘어오면서 개발적으로 components화 시킬수있게

<Background minHeight="300px"/>
//이미지를 라운드형 , 동그라미
<Image rounded/>
<Styled>
  {/*
    theme={
      color:#111,
      background:orange
    }
  */}
  <Button theme={{ color: 'purple', border: '1px solid #111' }}>primary Button</Button><
  <Button success text="버튼증가" onClick={() => this.modify(count + 1)}/>
</Styled>

해서 components를 조금더 알아보기쉽게하고 무엇보다 최종목표는
https://material-ui.com/와 같은 형태를 만드는것이다.

만들고있고, 계속 업데이트 할 예정이다.

참고사이트

Loading script...