과제. 계산기 목업 만들기
학습 목표
- HTML과 CSS를 활용하여 만들고자 하는 웹 애플리케이션의 레이아웃을 구성할 수 있다.
- Flexbox속성을 이용하여 자식 요소를 정렬할 수 있다.
- 자식 요소에 flex 속성을 추가하여 부모 요소에서 각각의 자식 요소가 차지하는 비중을 조절할 수 있다.
와이어프레임 그리기
- 사용툴 : figma
- 디자인을 위해 일반적인 와이어프레임보다 구체적으로 작성
- 영역 구분을 위해 class로 구분하여 명시
HTML 구조 잡기
<body>
<div id="calculator"> // 전체 container 역할을 하는 id를 지정
<div class="calculator-result-display">0</div> // display에 기본값으로 숫자 0이 출력된다.
<div class="calculator-buttons"> // result-display와 구분하기 위해전체 button 영역을 설정
<div class="button-ac-enter"> // clear enter button을 구분하는 영역을 설정
<button class="button-ac">AC</button>
<button class="button-enter">ENTER</button>
</div>
<div class="button-in-row"> // button 4개를 한 줄에 담을 수 있는 영역 설정
<button class="number">7</button> // 숫자 button을 number class로 설정
<button class="number">8</button>
<button class="number">9</button>
<button class="operator">+</button> // 연산자 button을 operator class로 설정
</div>
<div class="button-in-row">
<button class="number">4</button>
<button class="number">5</button>
<button class="number">6</button>
<button class="operator">-</button>
</div>
<div class="button-in-row">
<button class="number">1</button>
<button class="number">2</button>
<button class="number">3</button>
<button class="operator">*</button>
</div>
<divc class="button-in-row">
<button class="number-zero">0</button> // 다른 button과 크기가 다르기 때문에 따로 number-zero class로 설정
<button class="decimal">.</button> // 숫자나 연산자 버튼과 다른 기능을 하므로 decimal class로 설정
<button class="operator">/</button>
</div>
</div>
</div>
</body>CSS로 구현한 주요 부분
* 코드는 부분만 캡쳐- flex-direction
.calculator-buttons에column을 적용하여 2~4개의 버튼을 감싸고 있는 div classbutton-ac-enter,button-in-row을 세로축으로 정렬함- button 요소들을
row를 사용하여 가로축으로 정렬함
- flex-grow
- 2개부터 4개까지의 button이 존재하여, 가장 크기가 작아야 하는 button에
flex-grow: 1;을 적용하고 비율에 따라 2까지 적용 - button 2개 만큼의 비율을 맞추기 위해,
flex-basis에 너비를 정함
- 2개부터 4개까지의 button이 존재하여, 가장 크기가 작아야 하는 button에
- :hover, :active
- 마우스를 가져갔을 때와 클릭 했을 때 변화를 주기 위해 활용
- 마우스를 가져갔을 때와 클릭 했을 때 변화를 주기 위해 활용
완성본
마무리
- flex-grow 이해하는데에 오래 걸려서 한 번 더 정리를 해야함
- 버튼의 너비를 딱 맞추기 위해서는 flex-basis가 필 수인 것 같음
- AC 버튼과 ENTER 버튼이 글자 수 때문인지 비율이 딱 떨어지지 않아서 이래저래 찾아봤는데, 마지막에 기본 크기를 정해주어야 버튼이 더 커지지 않기 때문에 지정 필수인듯 함
- flex를 사용하면 버튼 사이에 간격을 주는 방법이 margin, padding 값 주는 방법 밖에 없는 건가... 아무리 찾아도 나오지 않길래 일단 그렇게 했는데 좀더 서치를 해봐야겠음!
- 버튼의 너비를 딱 맞추기 위해서는 flex-basis가 필 수인 것 같음
감성있는 개발자를 꿈꿔요