✨ SEB FE
페어프로그래밍
저번주 금요일에 시작했던 페어프로그래밍을 마무리하는 날!
👥 Pair Programming
계산기 목업(Mock-up) 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Calculator</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="calculator">
<div class="display-container">
<h3>calculation formula</h3>
<h3>result</h3>
</div>
<div class="button-container">
<div class="buttons">
<button class="number-button">AC</button>
<button class="calculate-button">%</button>
</div>
<div class="buttons">
<button class="number-button">7</button>
<button class="number-button">8</button>
<button class="number-button">9</button>
<button class="calculate-button">+</button>
</div>
<div class="buttons">
<button class="number-button">4</button>
<button class="number-button">5</button>
<button class="number-button">6</button>
<button class="calculate-button">-</button>
</div>
<div class="buttons">
<button class="number-button">1</button>
<button class="number-button">2</button>
<button class="number-button">3</button>
<button class="calculate-button">*</button>
</div>
<div class="buttons">
<button class="number-button">0</button>
<button class="enter-button">=</button>
<button class="calculate-button">/</button>
</div>
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
body {
background-image: url("./배경.jpg");
margin: 0;
padding: 0;
/* 100vh -> 브라우저 화면의 높이만큼의 길이 */
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.calculator {
width: 350px;
height: 500px;
padding: 20px 10px;
border: 2px solid rgb(21, 31, 31);
border-radius: 10px;
/* 요소 정렬 */
text-align: center;
background-color: rgb(115, 165, 152);
box-shadow: 3px 3px 3px 3px gray;
}
.calculator .display-container {
width: 300px;
height: 25%;
border: 2px solid rgb(21, 31, 31);
/* text-align으로 정렬될 요소기 때문에 inline-block로 변경 */
display: inline-block;
margin-bottom: 10px;
background-color: #efefef;
box-shadow: 3px 3px 3px 3px gray;
border-radius: 5px;
}
.calculator .button-container {
width: 310px;
height: 70%;
display: inline-block;
margin-top: 5px;
border-radius: 5px;
}
.buttons {
width: 100%;
height: 20%;
/* justify-content: left; */
/* 버튼들 관리 위헤 부모 요소에 flex 적용 & 줄바꿈 없음*/
display: flex;
flex-wrap: nowrap;
}
.buttons button {
font-size: 24px;
width: 20%;
border-radius: 10px;
margin: 5px 5px;
box-shadow: 2px 2px 2px 2px gray;
}
.buttons button.number-button {
flex-grow: 1;
}
/* 마우스 버튼 위에 올릴때 나타나는 효과 hover */
.buttons button.number-button:hover {
background-color: #d3d3d3;
cursor: pointer;
}
/* 버튼을 클릭할 시에 나타나는 효과 active */
.buttons button.number-button:active {
box-shadow: 1px 1px 1px 1px gray inset;
}
.buttons:first-child button.number-button:first-child,
.buttons:last-child button.number-button {
background-color: rgb(215, 127, 110);
}
/* 마우스 버튼 위에 올릴때 나타나는 효과 hover */
.buttons:first-child button.number-button:first-child:hover,
.buttons:last-child button.number-button:hover {
background-color: rgb(202, 119, 103);
cursor: pointer;
}
/* 버튼을 클릭할 시에 나타나는 효과 active */
.buttons:first-child button.number-button:first-child:active,
.buttons:last-child button.number-button:active {
box-shadow: 1px 1px 1px 1px gray inset;
}
.buttons button.calculate-button,
button.enter-button {
width: 90px;
background-color: rgb(223, 154, 141);
}
/* 버튼 위에 마우스를 올릴때 나타나는 효과 hover */
.buttons button.calculate-button:hover,
button.enter-button:hover {
background-color: rgb(204, 141, 127);
cursor: pointer;
}
/* 버튼을 클릭할 시에 나타나는 효과 active */
.buttons button.calculate-button:active,
button.enter-button:active {
box-shadow: 1px 1px 1px 1px gray inset;
}
✨ 마무리
모두 한 번씩 프로그래밍을 접하고 오신 분들이라 확실히 커뮤니케이션이 쉬웠다! 페어분들과 함께 끝까지 과정 마무리하고싶다..~ 화이팅이야앙
빙글빙글