오늘은 어제 했던 내용 가지고 계산기의 목업을 따로 만드는 과제를 수행했다.
<button>
요소로 작성하고, 내용은 텍스트로 작성합니다.div
1개 / 결괏값, 입력창 구역 2개 / 숫자와 공식 4줄 이렇게 썼음, +/-는 ^제곱으로 바꿨음<div class="calculator_container">
<div class="sec_result">0</div>
<div class="cont_input">
<div class="item_input1">
<button class="element">AC</button>
<button class="element">+/-</button>
<button class="element">^</button>
<button class="element">÷</button>
</div>
<div class="item_input2">
<button class="element">7</button>
<button class="element">8</button>
<button class="element">9</button>
<button class="element">×</button>
</div>
<div class="item_input3">
<button class="element">4</button>
<button class="element">5</button>
<button class="element">6</button>
<button class="element">-</button>
</div>
<div class="item_input4">
<button class="element">1</button>
<button class="element">2</button>
<button class="element">3</button>
<button class="element">+</button>
</div>
<div class="item_input5">
<button class="element">0</button>
<button class="element">.</button>
<button class="element">=</button>
</div>
</div>
</div>
display:flex;
선언 후 입력창은 수직으로 쌓아야하니 flex-direction
로 (flex-wrap
도 됨!)width(height):~
or flex:~
/ justify-content
, align-item
)border
로 선을 긋는데 안된다면 outline
으로 해보기nth-child
을 이용해 색 구별화border-radius
를 적용: 입력창의 요소에 하면 둥글한 디자인, 아니면 전체 박스에 적용해 포인트로 둥글만 해도 됨box-shadow
를 통해 자연스럽게 만들기(inset이나 shadow 설정으로 입체감 있게 만들 수도 있음):hover
,active
를 통해 커서를 올리고 누르는 애니메이션 추가.calculator_container {
display: flex;
flex-direction: column;
width: 350px;
height: 500px;
border: 1.5px solid rgb(86, 85, 86);
border-radius: 21.9px;
color: white;
box-shadow: 0 0 30px grey;
font-family: "nanumgothic", serif;
}
button {
color: #fff;
font-family: "nanumgothic", serif;
}
.sec_result {
display: flex;
height: 25%;
justify-content: end;
align-items: center;
font-size: 50px;
background-color: gray;
border-radius: 20px 20px 0 0;
padding-right: 5px;
}
.cont_input {
display: flex;
flex-direction: column;
height: 75%;
}
.cont_input > div {
display: flex;
height: 100%;
}
.item_input1 > .element {
background-color: rgb(103, 103, 103);
}
.element {
display: flex;
width: 25%;
border: 0.7px solid black;
background-color: rgb(128, 128, 128);
font-size: 30px;
align-items: center;
justify-content: center;
}
.element:active {
background-color: rgb(179, 179, 179);
}
.element:last-child {
background-color: orange;
}
.element:last-child:active {
background-color: rgb(192, 129, 45);
}
.item_input5 .element:nth-child(1) {
width: 50%;
border-radius: 0 0 0 20px;
}
.item_input5 .element:last-child {
border-radius: 0 0 20px 0;
}