React.js, 화면 그리기 스타일링

간단한 웹이라도 만들기 위해서는 일단 화면을 구상해야합니다.  화면을 구상하기 위해서는 React.js 이전에 html에 대해서 알아야합니다. 

저도 막막했기 때문에 일단 스타일링 속성에 대해서 정리해보겠습니다.

 

잘 사용하는 것과 헷갈리는 것 위주로 정리하겠습니다.

 

반응형

 

position : 위치를 어떻게 할 것인지 결정하는 것

css solid 제공

fixed: element를 브라우저 window에 상대적으로 위치

relative : element를 보통의 위치 기준으로 상대적으로 위치

absolute : element를 절대 위치로 위치

static : 원래의 순서대로 위치 , 기본값

 

flex-direction : 어떤 방향으로 배치할 것인지 결정하는 것

 

 

row: 아이템을 행에 따라 가로로 왼쪽부터 위치

column: 아이템을 열에 따라 세로로 위쪽부터 위치

row-reverse : 행에 따라 가로로 오른쪽부터 위치

column-reverse : 열에 따라 세로로 아래부터 위치

 

align-items : 아이템을 어떻게 정렬할 것인지 선택

 

 

stretch : 아이템을 늘려서 컨테이너에 맞게 채움

flex-start : cross 축을 시작점으로 아이템을 정렬

center : 중앙으로 아이템을 정렬

flex-end: cross 축의 끝점으로 아이템을 정렬

baseline: 아이템을 line 기준으로 정렬

 

justify-content: 아이템을 어떻게 나란히 맞출 것인지 지정

 

flex-start : main 축을 시작점으로 아이템을 맞춤

center: main : 축을 중앙으로 아이템을 맞춤

flex-end : main축을 끝점으로 아이템을 맞춤

space-between : main 축을 기준으로 첫 아이템은 시작점에 맞추고 마지막은 끝점에 맞추며 중간에 있는 아이템은 간격이 일정하게 맞춤

space-around : main축을 기준으로 아이템 주변 간격을 동일하게 맞춤 

 

---

 

보통 정렬부분에서 헷갈리는 경우가 많았어서 그 위주로 정리했습니다. 

정렬에 대한 부분은 3개 중에 잘 조정하시면 움직일 것입니다. ㅎㅎ