[SEB_FE] Flexbox + calculator mockup

✈️flexbox 속성(부모 요소)

---

flexbox의 주축은 flex-direction에 의해 정의되며, 4개의 값을 가진다.
row, row-reverse, column, column-reverse
row는 인라인 방향(가로)으로, column은 블록방향(세로)을 따른다.
flexbox는 주축 , 교차축을 따라 항목을 정렬하고, 끝을 맞추는 속성을 적용하는 방식으로 동작한다. 왼쪽, 오른쪽으로 생각하는 것보다, 시작선 끝선으로 생각하는 것이 좋다.
flex-wrap으로 줄 바꿈을 설정할 수 있다. 하위 요소의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 설정, 미설정 시 줄 바꿈을 하지 않는다.
justify-content는 자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 결정한다. flex-start , flex-end, center, space-between, space-around
align-items은 자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 결정한다. stretch , flex-start , flex-end , center , baseline

✈️flexbox 속성(자식 요소)

---

flexbox의 속성 3가지 값을 지정해줄 수 있다.

flex:   <grow(팽창 지수)>    <shrink(수축 지수)>    <basis(기본 크기)>

기본값

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

flex-grow 팽창지수는 자식 요소의 grow값 / 자식 요소들의 grow값의 총합 의 비율

shrink 팽창 지수와 반대로, 설정 비율만큼 줄어든다. flex-grow flex-shrink를 같이 사용하는 일은 추천하지 않는다.

basis는 기본크기로, flex-grow나 flex-shrink에 의해 자식 요소가 늘어나거나 줄어들기 전 유지되는 크기이다, flex-grow가 0일때, 기본크기를 지정하면, 그 크기는 유지된다. display 속성에 flex 가 적용된 컨테이너 내부에 존재하는 자식 박스는 경우에 따라, basis 로 설정된 크기가 항상 유지되는 것은 아니다.

• width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선이다.
• 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해, width 대신 max-width를 쓸 수 있다.

✈️Calculator mockup

---

계산기를 보다 깔끔하게 보이게 하고 싶었다. 그래서 컬러 팔레트를 이용했고, 내 취향껏 맞게 꾸몄다. 버튼은 한 줄 씩 div로 분리해주었다. 각 버튼 크기에 맞게 class를 분류했고, flex또한 팽창 비율을 맞춰 설정해주었다. (basis는 고정시켜주었다.) 비율이 안맞는 것인지 자꾸 keybutton요소가 calculator 밖으로 탈출하는 현상이 일어났는데, margin과 padding의 비율 맞춰주어 수정하였다. result는 flex-end를 활용하여 오른쪽 정렬을 해주었다. hover와 active에서 트랜지션 옵션을 적용하였다. (이로 인해 동적인 효과가 더해진 거 같다.) 다른 분들의 목업을 보면 화려한 애니메이션 효과를 적용하여 만드셨던데(깔끔한데 예쁘기까지...🙄) , 나도 여러 효과를 적용하여 디자인도 갖춘 계산기였으면 좋았겠다는 생각을 했다.