Unit 6 회고

YEN J·2022년 8월 30일
0

code states

목록 보기
4/43

계산기 만들기

저번주 조금 어려웠던 자바스크립트를 지나 html, css를 거치며 계산기의 mock-up을 만드는 과제를 수행했다. html과 css는 직관적으로 눈으로 볼 수 있다는 점이 재미있다보니 다양하게 시도해보며 나만의 계산기 목업을 만드는 과정이 너무 즐거웠다. 이를 바탕으로 실제 계산기의 기능을 수행할 수 있도록 자바스크립트로 기능까지 구현한다면 완성한 뒤 뿌듯할 것 같다..! 물론 지금은 너무나도 기초적인 과정을 수행하고 있지만 나만의 속도를 잃지 않고 단계적으로 성장할 수 있도록 노력해야겠다.

계산기 만드는 과정

1. 와이어프레임 작성하기

와이어프레임은 시각적으로 어떻게 보여질 것인지에 대해 대략적인 틀을 잡는 것으로 볼 수 있는데 나는 우선 코드 스테이츠에서 제공한 계산기의 모양을 바탕으로 와이어프레임을 작성했다.

2. 와이어프레임을 바탕으로 html파일 작성하기

와이어프레임을 바탕으로 가장 큰 틀인 calcualtor를 id속성값으로 주었고 그 안에 class 속성 값으로 입출력 값이 보여지는 displaybutton 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와 컨텐츠

Grid

  • grid도 flex와 같이 레이아웃을 잡는데 유용한 시스템
  • flex는 한 방향 시스템, grid는 두 방향 시스템으로 grid는 flex보다 복합적인 레이아웃 표현 가능
  • grid도 display: grid; 로 설정

적용하는 속성 범위
1. 부모요소

  • 그리드 형태 정의: grid-template-rows, grid-template-columns
  • 간격 설정: row-gap, column-gap, gap
  • 그리드 형태 자동 정의: grid-auto-columns, grid-auto-rows
  • 영역 이름으로 그리드 정의: grid-template-areas
  • 아이템 자동 배치: grid-auto
  • 아이템 세로 방향 정렬: align-items
  • 아이템 가로 방향 정렬: justify-items
  • 세로 가로 방향 정렬 동시에: place-items
  • 아이템 그룹 세로 정렬: align-content
  • 아이템 그룹 가로 정렬: justify-content
  • 아이템 그룹 세로 가로 정렬 동시에: place-content
  1. 자식요소
  • 각 셀의 영역 지정: grid-column-start, grid-column-end, grid-column, grid-row-start, grid-row-end, grid-row
  • 영역 이름으로 그리드 정의 시 속성: grid-areas
  • 개별 아이템 세로 정렬: align-self
  • 개별 아이템 가로 정렬: justify-self
  • 개별 아이템 세로 가로 정렬 동시에: place-self
  • 배치 순서 관련: order, z-index

<grid 관련 내용 출처>
1분코딩

0개의 댓글