Section1 Unit4 HTML, CSS 활용 - 계산기 만들기

 

---

Section1 Unit4 [HTML/CSS] 활용
계산기 목업 만들기

 

⭐️ 과제. 계산기 목업 만들기

• 와이어프레임

figma로 계산기 html 작업 전 와이어프레임 작성

 

• HTML, CSS 작성 

 작성했던 와이어프레임을 토대로 HTML을 작성하고, CSS로 스타일링을 했다. 페어 프로그래밍 과제라 페어와 함께 진행하고, 수업이 끝난 후에 각자 보완하는 시간을 가졌다.

 나는 최대한 실제 디자인과 비슷하게 하려고 했고, 브라우저 사이즈에 맞게 크기가 유동적으로 변했으면 해서 min/max width, height 크기를 정한 후 상대적 단위인 %, rem 등을 사용해서 CSS를 작성했다. 이 과정에서 font-size가 생각대로 조절이 잘 되지 않아서 고민을 좀 많이 했었는데 media query로 해결했다.

 

👩🏻‍💻 계산기 목업 만들기 HTML, CSS ↓

See the Pen 계산기 by sowon (@hello_FAY) on CodePen.

 

 

 나는 flexbox뿐만 아니라 레이아웃을 정렬하는 다른 문법들도 함께 사용했는데, 계산기를 완성 후 라이브 세션을 보니 강사님이 flexbox만을 활용해서 계산기를 만드는 예제를 보여주시길래 강의가 끝나고 내 CSS도 flexbox를 활용한 걸로 바꿔보았다. 

 ↓ flexbox를 활용한 CSS 코드 😊

See the Pen 계산기_flexbox CSS by sowon (@hello_FAY) on CodePen.

 결과적으로 UI가 바뀐건 없지만, 코드는 flexbox를 활용한 걸로 바꾸어 보았다.

 나중에 Grid도 다시 학습해 봐야겠다는 생각이 들었다. Flexbox는 Grid보다 활용빈도가 더 높아 자주 사용했었는데, Grid는 사용하지 않다보니 공부를 해도 자꾸 까먹게 된다는... Flexbox와 Grid 둘 다 적절한 때에 상황에 맞게 사용하면 좋을 것 같다는 생각이 들었다.

---

🌙  오늘의 회고

 2주차 강의가 시작되었다. 오전에는 동기부여 세션이, 오후에는 라이브 세션이 진행되었다.

 동기부여 세션에서는 지난 1일차에 봤던 고정 마인드셋과 성장 마인드셋 등에 관한 이야기를 했다. 긍정적인 마음가짐을 갖기 위한 다짐도 생각해봤는데, 다른 사람과 비교하지 않고 나의 기준에 맞게 열심히 하자는 생각이 들었다.

 라이브 세션에서는 이번 과제였던 계산기 만들기 강의와 리뷰를 했다. flexbox를 활용해서 계산기를 만드는데 강사님(?)이 정말로 flexbox만 엄청나게 활용해서 만들었다…! 나는 그냥 이것저것 섞어서 사용해서 flexbox의 비중이 높지는 않았는데..! 수업을 듣고 기존에 내가 작성했던 CSS에서 flexbox로 바꿀 수 있는 부분들은 바꾸어서 다시 만들어보았다.

 라이브 세션을 보면서 정말 다양한 디자인이 나온 것에 조금 놀랐었다. 나는 mac의 기본 계산기를 똑같이 만들었는데, 창의적이고 귀여운 작품들도 많이 나왔었다. 나도 저렇게 해볼걸 그랬나, 하는 생각도 잠시 들었다 😂 독창성은 어떻게 해야 키울 수 있을까?