1. 레이아웃과 와이어 프레임
html과 css를 이용하여 목업(실제 형태의 크기와 모양)만들었다. figma라는 디자인 도구를 이용해 레이아웃을 그려보고 어떤 class를 줄지 와이어프레임을 작성했다.
2. 마크업
- 부모 자식관계를 유의하여 html로 마크업을 한다.
- 전체적으로
container안에 계산기가 들어갈 박스
그 안에 계산값을 넣을 화면과 버튼
버튼 안에 가로 정렬될 버튼들의 박스
그 박스들 안에 버튼을 넣었다.
<div class="container">
<div class="calculator">
<div class="display">
<span>1</span><span>+</span><span>1</span><span>=</span><span>2</span>
</div>
<div class="buttons">
<div class="buttons_row">
<button class="buttons_col">AC</button>
<button class="buttons_col">%</button>
</div>
<div class="buttons_row">
<button class="buttons_col">7</button>
<button class="buttons_col">8</button>
<button class="buttons_col">9</button>
<button class="buttons_col">X</button>
</div>
<div class="buttons_row">
<button class="buttons_col">4</button>
<button class="buttons_col">5</button>
<button class="buttons_col">6</button>
<button class="buttons_col">-</button>
</div>
<div class="buttons_row">
<button class="buttons_col">1</button>
<button class="buttons_col">2</button>
<button class="buttons_col">3</button>
<button class="buttons_col">+</button>
</div>
<div class="buttons_row">
<button class="buttons_col">0</button>
<button class="buttons_col">.</button>
<button class="buttons_col">=</button>
</div>
</div>
</div>
</div>여기까지 작성하면 이렇게 생겼다.
3. 스타일 입히기
- 스타일 리셋 : 태그마다 기본적으로 갖고 있는 마진과 패딩을 없애고 border값까지 더해서 박스의 크기를 결정하는
box-sizig태그를 모든 요소들에 적용될 수 있는*셀렉터를 이용하여 설정한다.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}- 중앙정렬 : 계산기를 화면 정중앙에 위치 시키기 위해 계산기의 부모요소인
container에 flex box를 사용한다.
.container {
border: 1px solid blue;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center; //중심축 기준 중앙(가로)
align-items: center; //중심축 반대 기준 중앙(세로)
}- 계산기 몸통의 크기를 지정해주고 자식요소들의 정렬을 위해
flex-direction을 사용한다.
.calculator {
border: 1px solid red;
width: 350px;
height: 500px;
display: flex;
flex-direction: column;
}- 계산기 전체크기에 대한 화면과 버튼자리의 크기를 설정하기 위해
flex를 사용한다. 그리고 자식요소들을 정렬한다.
.display {
border: 1px solid orange;
display: flex;
flex: 1 0 20%;
justify-content: space-evenly;
align-items: center;
}
.buttons {
border: 1px solid green;
display: flex;
flex-direction: column;
flex: 1 0 70%;
}그러면 다음과 같이 생겼다.
flex를 사용해서 버튼의 가로와 세로를 정렬한다.
.buttons_row {
display: flex;
flex: 1 0 20%;
}
.buttons_col {
flex: 1 0 25%;
}
- AC 버튼과 0을 더 크게 만든다.
.buttons :first-child :first-child {
flex-basis: 75%;
}
.buttons :last-child :first-child {
flex-basis: 50%;
}
👩🔬flex 속성으로 실험해보기
flex-grow 속성의 값이 0인 경우에만 flex-basis 속성의 값이 유지됩니다. display 속성에 flex 가 적용된 컨테이너 내부에 존재하는 자식 박스는 경우에 따라, basis 로 설정된 크기가 항상 유지되는 것은 아닙니다.
flex-grow속성의 값이 0일때
.display {
border: 1px solid orange;
display: flex;
flex: 0 0 10%;
}
.buttons {
border: 1px solid green;
display: flex;
flex: 0 0 20%;
}
flex-grow속성의 값이 0이 아닐때
.display {
border: 1px solid orange;
display: flex;
flex: 1 0 10%;
}
.buttons {
border: 1px solid green;
display: flex;
flex: 0 0 20%;
}
buttons의 flex-basis값이 display보다 큰데도 더 작게 구현이 되었다. 왜냐하면 flex-basis값으로 각 각 10%,20%씩 가져간 다음 빈 공간을 flex-grow 값 인 1과 0만큼 나눠가졌기 때문이다.
- 둘 다
flex-grow: 1인 경우
.display {
border: 1px solid orange;
display: flex;
flex: 1 0 10%;
}
.buttons {
border: 1px solid green;
display: flex;
flex: 1 0 20%;
}
보다시피 display가 buttons의 반이 아니다. 왜냐면 10%, 20%씩 가지고 남은 값을(늘어나야하는 공간의 값) 1대 1비율로 똑같이 나눠가졌기 때문이다. 예를 들어 100px에서 10px 20px씩 가져간다음 70px에서 flex-grow: 1로 인해 똑같이 35px 35px씩 나눠가지기 때문에 45px 55px이 된다.
+) 라이브 세션때 얻게 된 아이디어 바탕으로 다시 만들어본 계산기 :) 뉴모피즘이라는 마치 흰 천에 올라온듯한 느낌이 특징인 디자인을 적용해보았다.
📝 오늘의 회고
✔️ 계산기 목업 만들기를 시작했다. 더불어 페어프로그램도 같이 진행되었는데 다행히 (?) 나와 같은 비전공자분이셔서 부담없이 시작할 수 있었다. 되려 내가 질문에 답을 해줄 수 있는 상황도 있어서 뿌듯한 하루.
✔️동기분들 진짜 열심히한다. 과제제출한거나 블로그들을 훔쳐보다보면(?) 너무 대단한 사람들이 많다! 비교하지 말랬지만 오히려 시너지효과가 나서 나도 저렇게 열심히 잘 해야지라는 의욕이 뿜뿜한다. 부트캠프를 시작하지 않았더라면 느즈막히 일어나 시간을 얼렁뚱땅 보내고 코딩공부 찔끔 한다음에 배부른채로 잠에 들었겠지. 다시한번 나를 붙여준 코드스테이츠에게 감사를 :)
✔️그동안 나를 정말 괴롭히던 flexbox를 전체적으로 이해를 하게되었다. 부모요소에 따라 달라진다던가 괜히 margin 붙어서 뒤틀려보인다던가 이런걸 잡아낼 수 있게 되었다 🥺
✔️블로그 틀을 잘 못잡겠다. 내가오늘 배운 개념 + 과제하면서 알게된점을 적는다면 한세월걸릴것 같은데 여러가지로 시도해보려고한다. 일단 평일은 바쁘니까 주말에 돌아볼것+알게된 새로운 개념적기 위주로 적어보기.
