FLEX
-
드디어 7일차!코드스테이츠 2022. 10. 28. 20:59
오늘은 레이아웃과 flex를 학습하고 3시간 동안 계산기 목업을 만들었다. 원래는 벌집모양을 만들고 싶었지만 신박한 디자인을 찾아 그걸 만들어보았다. 옛날 동네에서 친구들이랑 같이 뛰어 놀던 놀이 중 하나를 떠오르게 했다. 첫번째 고비는 두 칸을 차지하는 등호 버튼이 었다. flex를 이용하여 줄바꿈을 이용하려했는데 등호가 있는 박스의 크기를 늘리니 다른 박스의 크기들도 늘어났다. 그래서 등호 박스 위와 아래 구역을 나누어 윗 구역의 요소는 flex-direction: row로 아랫 구역의 요소는 flex-direction: column으로 해결하였다. /*윗 구역*/ .flex-row { flex: 1 1 0; display: flex; } /*아랫 구역*/ .flex-col { flex: 1 1 0;..