[과제] 계산기 목업 만들기

 

 

오늘은 내가 만든 결과물을 자랑하면서 시작!

어제 배운 CSS flex를 활용해 계산기 목업 만들기에 도전했다.

 

처음에는 그냥 맥북 기본 계산기를 따라서 만들었는데

크루님이 지난 기수에서 만든 계산기를 보여주시면서 약간 디자인 경쟁(?)이 붙었다 ㅋㅋ

결과적으로 여러 학생들의 다양한 디자인의 계산기가 탄생해 영감을 받는 계기가 되었으니

계산기 대축제는 좋았던 것으로👍

 

내가 만든 계산기는 윈도우 1.0 시절의 계산기를 본따서 만들었다.

정말 유행과 감성이라는 것은 돌고 도는 것인지

근 40년 전의 계산기가 이렇게나 힙하고 예뻐 보일 일인지! 

 

계산기 목업 제작 어려웠던 점

처음에 애를 먹었던 것은 flex의 각 속성들에 대한 이해가 부족한 것 때문이었다.

너무 여러 속성과 그 속성값이 있다 보니 완전히 익히는 데도 연습이 꽤 필요했다.

 

내가 헤매고 있을 때 구원의 손길을 주신 페어님의 도움과

마지막 라이브 세션에서 flex의 각 속성을 명쾌하게 정리해 주신 덕분에

이제는 flex의 여러 속성들을 잘 익혔다고 생각한다!

 

flex: (grow), (shrink), (basis)

축 방향의 크기를 지정하는 속성 세가지

 

flex-grow: flex container에 남은 공간을 얼마나 더 차지할 것인지를 나타낸다. 초기값은 0이다.

flex-shrink: flex-grow와 반대로 container에 공간이 부족해지면 item의 크기가 얼마나 줄어들 수 있는지 지정한다. 초기값은 1.

flex-basis: item의 크기를 정하는 가장 기본적인 속성이다. 초기값은 auto. auto로 설정하면 width, height 속성이 우선한다.

 

추가로 공부해 보면 좋을 것들

이번 계산기 목업 제작과 동기들의 작품 구경을 계기로 많은 자극을 받았다.

CSS가 단순 작업에 고통스러운 '노가다'의 반복이라고만 생각했는데

CSS만 사용해도 상당히 미려한 효과를 낼 수 있어 창의적인 작업이 될 수 있겠다고 생각했다.

 

animation 활용

CSS로 애니메이션을 만들 수 있다는 것을 이번에 처음 알게됐는데,

사용할 일이 아주 자주 있지는 않겠지만 그래도 공부해 두고 적재적소에 활용해야겠다고 생각했다.

나중에 공부하려고 하면 숙제가 되어 버리니 주말 중에 공부해 보는 것으로.

 

미디어쿼리 활용에 더 능숙해지기

반응형 웹을 만드는 데서 미디어쿼리는 필수적이다.

분명히 예습하는 동안 사용법을 배웠고 적용하는 연습도 해봤지만

막상 쓰려고 하면 고생해서 짜 둔 틀이 다 무너질까봐 겁부터 나서 잘 안 하게 되곤 했다.

앞으로 자주 활용해서 능숙해지는 것을 목표로 해야겠다.

 

clip-path

요소의 일부를 잘라내는 속성.

clip-path maker라는 것이 있어서 손쉽게 원하는 도형을 만들 수 있다.

clip-path로 만든 도형에 일반 box-shadow를 적용하면 네모 모양으로 그림자가 생기므로

drop-shdow를 활용하면 도형에 맞는 그림자를 줄 수 있다.