[FE Bootcamp] 4일차_FLEX BOX

오늘은 와이어 프레임과 flex에 대해 배웠다.

flex 해버렸지 뭐야! 가 아니라.,.,.유동적으로 크기를 변경할 수 있는 박스라고 한다.

나는 그동안 inline-block과 float를 이용하여 박스들을 배치했는데, 이런게 있는줄은 전혀 몰랐다.

학교에서는 왜 이런 좋은걸 안가르쳐주나!

 

우선 와이어 프레임은 어떠한 페이지를 만들기 전에 그리는 설계도 같은 그림이다. 

내가 어떻게 박스나 요소들을 배치할지, 간격은 얼마나 띄울지, 여백은 얼마나 줄지 등등

계산기를 만들기 위한 와이어 프레임

오늘은 계산기 만드는 작업을 했기 때문에, 나도 계산기를 만들기 전에 와이어 프레임을 먼저 그려 계산기를 어떻게 디자인할지 대충 설계를 해 보았다. 

 

이제 저 버튼과 박스들을 잘 배치하여 와이어 프레임을 그린대로 웹 페이지를 디자인 해야 했다.

이를 배치하기 위해 flex를 이용하였는데, 내용이 매우 길기 때문에 내일로 미뤄두고

오늘은 완성된 계산기를 자랑하고 마치도록 해야겠다.

계산기

내일은 사전 일정이 있어 휴가를 냈다. 다행히 페어 분도 내일 수업을 못들으셔서 페어 프로그래밍에 민폐를 끼칠 일은 없을 것 같다. 

노트북을 챙겨가서 남는 시간에 블로그를 작성해야겠다. 크큭