Facts
프로젝트
- 미들웨어 분리 완료.
- css flex와 grid를 웹 게임을 한 번씩 끝까지 다 해봤다.
-
css 적용 시작
- styled-component와 emotion-core 중 비교를 해서 스타 숫자가 많다고 바로 고르지 말고 비교 분석해서 나의 프로젝트에 어느 부분이 더 맞는지 체크 후 선택하기.
Feelings
- css 아직 시작은 안 했지만 뭔가 그래도 기대된다.
Findings
flex는 1차원으로 모든 것을 표현을 한다.
-
justify-content: 요소를 정의에 따라 x축에서 이동
- flex-start: 요소들을 컨테이너의 왼쪽으로 정렬
- flex-end: 요소들을 컨테이너의 오른쪽으로 정렬
- center: 요소들을 컨테이너의 가운데로 정렬
- space-between: 요소들 사이에 동일한 간격을 둠
- space-around: 요소들 주위에 동일한 간격을 둠
-
align-items: 요소를 정의에 따라 y축에서 이동
- flex-start: 요소들을 컨테이너의 꼭대기로 정렬
- flex-end: 요소들을 컨테이너의 바닥으로 정렬
- center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬
- baseline: 요소들을 컨테이너의 시작 위치에 정렬
- stretch: 요소들을 컨테이너에 맞도록 늘린다
-
flex-direction x축 반전, y축 반전, x y 축 반전 등.
- row: 요소들을 텍스트의 방향과 동일하게 정렬
- row-reverse: 요소들을 텍스트의 반대 방향으로 정렬
- column: 요소들을 위에서 아래로 정렬
- column-reverse: 요소들을 아래에서 위로 정렬
- order: content의 내용 순서 변경
- align-self: align-items의 단일 대상 버전
-
flex-wrap: 줄바꿈 및 간격 바꾸기
- nowrap: 모든 요소들을 한 줄에 정렬
- wrap: 요소들을 여러 줄에 걸쳐 정렬
- wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬
-
align-content: 세로선 간의 공간 조절
- flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬한다
- flex-end: 여러 줄들을 컨테이너의 바닥에 정렬한다
- center: 여러 줄들을 세로선 상의 가운데에 정렬한다
- space-between: 여러 줄들 사이에 동일한 간격을 둔다
- space-around: 여러 줄들 주위에 동일한 간격을 둔다
- stretch: 여러 줄들을 컨테이너에 맞도록 늘린다
grid는 2차원으로 표현. table로 형성되어 있다.
- grid-column-start: grid 요소의 시작점을 정의
- grid-column-end: grid 요소의 끝 지점의 위치를 정의
- span: 요소의 넓이를 지정.
- grid-row-start: grid 요소의 행 시작점을 정의
- grid-row-end: grid 요소의 행 끝 지점의 위치를 정의
- grid-area: 요소의 크기와 위치를 나타냄
- grid-template-columns: 그리드 열 크기와 명칭을 정의 (grid-template-columns: 20% 20% 20% 20% 20% 이면 화면의 20%를 차지하는 5개의 열을 만듦)
-
grid-template-row: 그리드 행 크기와 명칭을 정의
(grid-template-rows: 20% 20% 20% 20% 20% 이면 화면의 20%를 차지하는 5개의 행을 만듦)- 20% 대신해서 100px(말 그대로 픽셀) 3em(해당 폰트의 대문자 M의 너비) 1fr(fraction, 1/n 개의 열 만큼 사이즈를 차지함)
- grid-template: 위 row와 column를 섞어서 만든 명령어. (grid-template: 50% 50% / 200p 열)
Future Action
- css library를 그냥 아무 생각 없이 star이 많다고 바로 고르려고 했다. 바로 급하다면 상관없지만 공부하는 입장에서 최소한 2개 이상은 자주 쓰는 것을 비교해서 분석해서 나에게 꼭 필요한 것을 골라서 적용하는 것도 괜찮을 것 같다. css뿐만 아니라 다음에도 뭔가 선택지가 있으면 비교 분석해서 딱 알맞은 것을 골라서 쓰는 게 좋을 것 같다.