코드스테이츠 44기 4일차

• 4일차 후기

오늘은 계산기 목업 작업!

flex를 배우고 계산기 목업을 하려고 하니 어떻게 해야 할지 몰라서 너무 막막했다.

다른 분들은 속도가 엄청 빠른데 나는 진도가 안 나가서 뒤쳐지는 느낌이 들기도 했다.

페어 활동과 다른 분들이 진행하는 것을 보니 공부의 필요성을 더욱 느꼈다!

 

부트캠프가 끝난 이후에도 따로 공부를 하며 활동 때 만들었던 계산기 목업을 지우고 다시 처음부터 시작했다.

잘 모르는 상태로 붙여넣기를 해놓은 상태였기에 html을 하며 구조부터 다시 짰다.

 

애초에 구조도 제대로 짜지 않은 상태에서 css를 고민하고 있었다.

진도가 제대로 나가질 리가.....

 

• flex box

Flexbox로 레이아웃을 구성한다는 것은, 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법

요소의 배치와 정렬을 플렉스 컨테이너(플렉스 박스 방식으로 레이아웃을 결정할 요소)와 플렉스 아이템(컨테이너 내부에서 플렉스 방식으로 배치되는 요소) 간의 상호작용을 통해 결정

 

플렉스 컨테이너로 사용하고자 하는 것에 display:flex; 를 하면 만들어진다.

플렉스 박스 방식은 두 개의 축을 제공한다. 그중 하나의 축을 주축 삼아 요소를 배치하는데, 주축의 기본값은 가로방향(왼쪽에서 오른쪽)이다.

• flex box관련 속성들

flex-direction

flex-wrap

justify-content

align-items 등등..

 

<flex-direction>

 

플렉스 컨테이너의 주축을 결정하는 속성, 행은 가로축을 열을 세로축을 주축으로 한다. (부모 요소에 설정해서 자식 요소 틀을 정렬할 축을 정함)

속성값 :

flex-direction : row; (기본값. 주축은 행이고 방향은 컨텐츠의 방향과 동일)

flex-direction : row-reverse; (주축은 행이고 방향은 컨텐츠의 방향과 반대)

flex-direction : column; (주축은 열. 콘텐츠의 방향과 동일)

flex-direction : column-reverse; (주축은 열. 콘텐츠의 방향과 반대)

 

<flex-wrap>

 

아이템들이 강제로 한 줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러 행으로 나누어 표현(줄 바꿈)할 것인지 결정하는 속성

속성값 :

flex-wrap : nowrap; (기본값. 공간 부족해도 요소를 한 줄에 배치)

flex-wrap : wrap; (공간 크기에 따라 요소가 여러 행에 걸쳐 배치)

flex-wrap: reverse; (나열되는 시작점과 끝점이 반대)

flex-wrap: reverse;

(flex-flow는 flex-direction과 flex-wrap을 같이 넣을 수 있다. flex-flow : row-reverse wrap;처럼 )

 

<justify-content>

 

자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 정한다. 요소들이 가로로 정렬되어 있다면 가로 방향으론 어떻게 정렬할 것인지, 세로로 정렬되어 있다면 세로 방향으론 어떻게 정렬할 것인지 정하는 속성

속성값:

justify-content: start;

justify-content: center;

justify-content: space-between; (사이의 간격이 일정하다)

justify-content: space-around; (외부의 간격이 일정하다)