오늘의 Checkpoint

계산기 목업만들기

와이어프레임 구성

flex를 사용하여 정렬하기
: margin과 padding 대신, justify-contents와 align-items 속성으로 정렬

align-items : center; 가 적용 안될때

• container의 영역을 먼저 확인
  : 적용이 되었는데 container의 범위가 예상했던 것보다 작을 수 있으므로 border로 영역 확인
• body태그의 background-color가 화면 전체 적용되더라도 border의 영역이 다름

• 전체 높이는 px 보다 vh 추천
  -> 스크롤 생김
  -> 초기화 작업 및 박스사이즈 세팅 변경 필요

정확한 사이즈을 위한 초기화 작업

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

계산 결과창 숨은 영역

• 연산 영역(숨은 영역)
  : 합산 영역을 표기하기 위해 연산하는 영역이 display: none; 으로 화면에서 가려져있음

• 합산 영역

< 클래스명 참고용 >

    <!--계산영역-->
    <main>
      <!--연산-->
      <div class="calculator__display--bare">
        <span class="calculator__operend--left">0</span>
        <span class="calculator__operator">+</span>
        <span class="calculator__operend--right">0</span>
        <span class="calculator__equal">=</span>
        <span class="calculator__result">0</span>
      </div>
      <!--연산 결과물-->
      <div class="calculator__display--for-advanced"></div>
    </main>

숫자버튼 (0~9) number
연산자 버튼 (+, -, *, /) operator
소수점 버튼 (.) decimal
초기화 버튼 (AC) clear
계산 버튼 (Enter) calculate

선택자 :nth-child() 적용 안될 때
: 소괄호 내부에 n에 해당하는 내용을 지정해야함
ex.
.inputArea :nth-child(){ CSS 내용들 }
-> .inputArea :nth-child(n){ CSS 내용들 }

Recheck

flex-grow의 비율은 flex-basis: 0; 일때 가장 명확하게 보임
: 요소의 크기를 0으로 설정하면 여백이 100%로 측정되므로 여백의 분배 비율을 나타내는 grow값이 가장 잘 보임

요소의 크기는 flex-basis값 외에도 영향을 받음
: flex-grow : 0;이 아니고 flex-shrink: 0;이 아니라면 요소의 크기는 basis값보다 커지거나 작아짐

이해도 자가 점검 리스트

Chapter1. 레이아웃

• 레이아웃이 필요한 이유를 이해한다.
• 레이아웃을 위한 HTML을 만들 수 있다.

Chapter2. Flex

• display: flex; 를 자식 요소가 아닌 부모 요소에 적용해야 함을 이해한다.
• flex-direction 을 이용하여 요소를 정렬할 방향을 결정할 수 있다.
• justify-content 와 align-items 를 이용하여 수평-수직 정렬을 결정할 수 있다.
• flex-grow 를 이용하여 요소를 얼마나 늘릴 것인지 결정할 수 있다.
• flex-basis 를 이용하여 요소의 기본 크기를 결정할 수 있다.
• VScode의 레이아웃을 Flexbox를 이용하여 구현할 수 있다.

과제. 계산기 목업 만들기

• HTML로 계산기에 필요한 구조를 짤 수 있다.
• 숫자 버튼, 기능 버튼을 Flexbox로 각각 배치할 수 있다.
• 검색을 통해 다양한 CSS 속성을 적용할 수 있다.

자기주도적 학습 가이드

이해도 자가 점검 리스트의 결과를 토대로 자기주도적 학습 계획을 수립하고 실천해 보세요.

• 오늘 학습이 어려웠다면(0~6개)
  • 개념학습 다시 보기
  • 이해되지 않는 개념 아고라스테이츠에 질문하기
• 오늘 학습이 수월했다면(7-9개)
  • Flexbox의 다양한 속성을 연습하고 블로그 작성하기
  • 이해되지 않은 개념은 검색을 통해 자기주도적 학습 후 블로그에 정리하기
  • 아고라스테이츠에 올라온 다른 수강생의 질문에 답변하기
• 추가적인 학습을 하고 싶다면(10~11개)
  • 레이아웃을 구성할 때 Flexbox만큼 자주 사용되는 Grid에 대하여 학습하세요.
  • 아고라스테이츠에 올라온 다른 수강생의 질문에 답변하기

오늘의 나

느낀점
계산기를 만들었다. 이게 이렇게 복잡한 일이었구나. 심지어 쉽게 가로로 나누면 될 것을 수직으로 섹션 나누고, 가로로 섹션 나누고 또 다시 하위 요소 나누고 flex로 끝점 맞춰서 나열하고.. 물론 복잡하게 해도 flex를 더 여러 방면으로 쓸 수 있어서 좋긴 한데, 시간이 많이 걸린게 흠이다. 아직 공부할 때니까 이렇게 연습하는 것도 나쁘지 않겠지. 다만, 다음부터는 꼭 이렇게 해야한다라는 것보다 큰 그림을 보자. 정답은 없으니 쉽게 갈수있는건 쉽게 가고.
그리고 웹에서 눈에 띄는 디자인을 좀 생각해봐야겠다. 핀터레스트로 단색의 그니쉬 그레이 음각 계산기 3d모델링이 너무 예뻐서 비슷하게 해보려고했는데... 눈에 띄지 않는다. 실제 제품은 심플하고 깔끔한게 예뻐보이지만, 우선 눈에 띄어야한다. 개발자로서 심각하게 고려해야할 사항은 아닌 것 같지만 생각해볼 문제인 것 같다. 심플하되 눈에 띄어야 된다.

개선점 및 리마인드

• 정답은 없으니 배울때 이것 저것 해보자!
• 개발의 목적을 생각해보고, 문제를 꼬아서 풀지는 말자.
• flex의 속성 중 grow는 부모 요소의 공간을 차지하는 정도를 조절!