드디어 7일차!

오늘은 레이아웃과 flex를 학습하고 3시간 동안 계산기 목업을 만들었다. 원래는 벌집모양을 만들고 싶었지만 신박한 디자인을 찾아 그걸 만들어보았다.

Designer:  Vadim Kibardin  for  Kibardindesign Studio

옛날 동네에서 친구들이랑 같이 뛰어 놀던 놀이 중 하나를 떠오르게 했다. 첫번째 고비는 두 칸을 차지하는 등호 버튼이 었다. flex를 이용하여 줄바꿈을 이용하려했는데 등호가 있는 박스의 크기를 늘리니 다른 박스의 크기들도 늘어났다. 그래서 등호 박스 위와 아래 구역을 나누어 윗 구역의 요소는 flex-direction: row로 아랫 구역의 요소는 flex-direction: column으로 해결하였다.

/*윗 구역*/
.flex-row {
    flex: 1 1 0;
    display: flex;
}

/*아랫 구역*/
.flex-col {
    flex: 1 1 0;
    flex-direction: column;
    display: flex;
}

 

처음에 출력되는 부분의 기울어짐 없는 버전으로 만들었는데 페어분께서 해보는 것이 어떻냐 하셔서 도전하게 되었다. transform을 페어분께서 사용해 보라 하셔서 해봤는데 x축으로 이동시키고 x축으로 기울여 봤는데 계속 하나만 적용을 받았다. 서치를 해보니 여러게 쓸 때는 여러 개로 나누어 쓰는게 아니라 하나에 띄어쓰기를 구분하여 작성하는 것이었다.

#out {
    transform: translateX(-5.5px) skew(10deg);
}

월요일도 목업 만드는 시간이 있는데 육각형 도전 해봐야겠다.