디즈니 클론(styled-components)

 

Styled-Component 를 사용한 react 프로젝트!

 

제작해본 이유는 간단하다  

 

Styled-Component 사용법 익히려고!

 

그리하여 Styled-Component 에 대해 정리를 해보려한다

 

---

 

🎨 S t y l e d - C o m p o n e n t s

 

javascript 파일 내에서 css를 사용할 수 있게 해준 대표적 css in js 라이브러리

 

js 코드 내에서 css 스타일 지정 가능

 

 

 

❔ 그 렇 다 면   왜   쓰 는 가 ?!

 

component가 많을 경우 class명이 중복될수 있는 문제 발생할수 있어서

 

이를 방지하기 위해 class 선언 없이 component에 접목

 

 

 

💾 설 치 법

 

npm install styled-components

 

 

🚀 사 용 법

 

const 태그이름 = styled.div `  // 백틱이 중요

	background-color: black;
    color:white;

`;

 

 

💲 플 러 그 인

 

자동완성 플러그인

vscode-styled-components

 

 

 

➕ 추 가 로

 

유툽으로 초반 화면구성을 보았는데 예쁜 박스에 이미지 위로 마우스를 올리면 영상이 나오는 멋진 페이지라서 

 

styled-components 와 함께 매력적으로 다가왔던점

 

(하지만.. 클론 코딩 영상에서는 구현 안해서 나혼자 구현해본건 함정..)

 

 

깃허브 주소: 

https://github.com/ryugaram/Disney_Clone

ryugaram/Disney_Clone