ํ์ด ๋ถ์ด๋ ์ด์ ๋ถํฐ ์ค๋๊น์ง html, css ํ์ผ๋ง ๊ฐ์ง๊ณ ๊ณ์ฐ๊ธฐ ๋ชฉ์ ์ ๋ง๋ค์๋ค.
// index.html
<!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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator">
<div id="calculator_display">
<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">0</div>
</div>
<div id="calculator_button">
<div class="line">
<button class="big_button clear">AC</button>
<button class="big_button calculate">=</button>
</div>
<div class="line">
<button class="small_button number">7</button>
<button class="small_button number">8</button>
<button class="small_button number">9</button>
<button class="small_button operator">/</button>
</div>
<div class="line">
<button class="small_button number">4</button>
<button class="small_button number">5</button>
<button class="small_button number">6</button>
<button class="small_button operator">*</button>
</div>
<div class="line">
<button class="small_button number">1</button>
<button class="small_button number">2</button>
<button class="small_button number">3</button>
<button class="small_button number operator">-</button>
</div>
<div class="line">
<button class="big_button">0</button>
<button class="small_button decimal">.</button>
<button class="small_button operator">+</button>
</div>
</div>
</div>
</body>
</html>
/* style.css */
* {
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.calculator {
display: flex;
flex-direction: column;
align-items: center;
width: 350px;
height: 500px;
background-color: black;
padding: 1rem;
border-radius: 10px;
}
#calculator_display {
display: flex;
width: 320px;
height: 150px;
margin-bottom: 1rem;
justify-content: flex-end;
align-items: flex-end;
background-color: aliceblue;
border-radius: 10px;
}
#calculator_button {
width: 320px;
height: 400px;
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: gray;
border-radius: 10px;
}
.calculator__display--for-advanced {
display: none;
}
.calculator__display--bare {
font-size: 3rem;
margin-right: 10px;
}
.line {
padding: 5px;
display: flex;
justify-content: space-around;
}
.big_button {
font-size: 2rem;
width: 140px;
height: 60px;
border-radius: 10px;
font-family: monospace, cursive;
}
.small_button {
font-size: 2rem;
width: 60px;
height: 60px;
border-radius: 10px;
font-family: monospace, cursive;
}
.operator {
background-color: black;
color: white;
}
.clear {
background-color:antiquewhite;
}
.calculate {
background-color: antiquewhite;
}
โย flexbox ์์ ์์ฌ๋ก ๋ค๋ฃฐ ์ ์์ด์ผ ํจ!
p:first-of-type {โฆ}
div:last-of-type {โฆ}
p:nth-last-of-type(2) {โฆ}