저번주 조금 어려웠던 자바스크립트를 지나 html, css를 거치며 계산기의 mock-up을 만드는 과제를 수행했다. html과 css는 직관적으로 눈으로 볼 수 있다는 점이 재미있다보니 다양하게 시도해보며 나만의 계산기 목업을 만드는 과정이 너무 즐거웠다. 이를 바탕으로 실제 계산기의 기능을 수행할 수 있도록 자바스크립트로 기능까지 구현한다면 완성한 뒤 뿌듯할 것 같다..! 물론 지금은 너무나도 기초적인 과정을 수행하고 있지만 나만의 속도를 잃지 않고 단계적으로 성장할 수 있도록 노력해야겠다.
1. 와이어프레임 작성하기
와이어프레임은 시각적으로 어떻게 보여질 것인지에 대해 대략적인 틀을 잡는 것으로 볼 수 있는데 나는 우선 코드 스테이츠에서 제공한 계산기의 모양을 바탕으로 와이어프레임을 작성했다.
2. 와이어프레임을 바탕으로 html파일 작성하기
와이어프레임을 바탕으로 가장 큰 틀인 calcualtor를 id속성값으로 주었고 그 안에 class 속성 값으로 입출력 값이 보여지는 display와 button container를 작성해주었다. button container 안에는 class 속성값이 col인 div를 만들었는데 (원래 row로 작성하는 것이 적합했지만 이 부분은 온전히 나의 실수다..) 와이어프레임의 버튼을 보면 총 5줄로 이루어져있으므로 같은 div를 5개 만들어주었다. col 안에는 크게 숫자버튼, 연산자버튼, 부가기능버튼으로 나누어 class 속성값이 각각 num, op, func인 button을 작성해주었다.
3. css파일 작성하기
4. 수정한 부분
나와 같이 프로그래밍을 진행하게 된 페어의 계산기를 보니 페어는 hover을 사용하여 마우스를 올리면 배경색이 바뀌는 효과를 주었다. 페어의 코드에서 아이디어를 얻어 나도 마우스를 올리면 숫자가 커지는 효과를 주어 계산기 목업 만드는 작업을 마무리 했다.
5. 추가적으로 알게 된 부분
페어와 함께 코드를 보다가 flex-grow 속성에 대해 의문점을 가졌던 부분은 '왜 코드를 작성한대로 출력되지 않는가'였다.(예를 들어, 2:1:1의 비율로 작성했는데 실제 보이는 것은 거의 1:1:1 수준이었다.) 찾아본 결과, 우리가 작성한 코드와 실제 출력되는 비율이 다른 이유는 flex-grow의 경우 컨텐츠의 길이에 따라 컨텐츠를 제외한 여백의 비율로 설정된다는 것이다. 따라서 flex 속성에서 %로 값을 주면 문제를 해결할 수 있다. 만약 flex-grow 속성을 쓰고 싶다면 flex-grow와 함께 flex-basis를 0으로 설정해주면 문제를 해결할 수 있다. flex-basis는 디폴트값으로 auto가 설정되기 때문에 이를 0으로 바꿔 온전히 flex-grow 속성이 작용할 수 있게하는 것이다.
<참고사이트>
flex items
flex
stackoverflow에 올라온 flex-grow 관련 질문과 답변
flex-grow와 컨텐츠
적용하는 속성 범위
1. 부모요소
<grid 관련 내용 출처>
1분코딩