react.js & node.js 7일차

styled-components는 scss 처럼 쓸 수 있기 때문에 속성안에 다른 속성을 또 적어줄 수 있다.

또한 내부에서 상속받아서 css를 적어줄 수도 있다.

위와같이 위쪽에 선언된 속성을 긁어와 상속받은 다음 추가 속성을 붙일 수 있다.

 

---

 

flex

이번에야말로 CSS Flex를 익혀보자 – 1분코딩 (studiomeal.com)

이번에야말로 CSS Flex를 익혀보자

display:flex

flex-direction:column

 

align-items: center

 

이런식으로 align-items는 수직방향의 정렬을 수행해준다.

 

justify-content는 수평방향을 처리한다.

 

부모의 height를 100vh로 주면 위와같이 가운데 정렬이 되어버린다.

 

그외에도 justify-content는 다양한 속성들이 있지만 그건 알아서 찾아봐서 그때그때마다 사용해주자.

 

위와같이 보라색 빗금부분은 자식요소가 더 들어갈 수 있다는 의미이다. 이걸 차지하기 위해서는 flex-grow속성을 이용해서 자식이 최대한의 비율을 가지도록 만들 수도 있다.

 

위와같이 flex-wrap 속성을 주면 자식요소가 한칸 내려갈 수 있다.

 

 

Grid

이번에야말로 CSS Grid를 익혀보자 – 1분코딩 (studiomeal.com)

이번에야말로 CSS Grid를 익혀보자

 

Grid라는 것이 존재하여 바둑판 형태로 배치 할 수 있다.

 

to-do 만들기