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">
<link rel="stylesheet" href="css/style.css">
<script src="calculator.js" defer></script>
<title>Calculator</title>
</head>
<body>
<div class="container">
<input type="text" value="000" disabled>
<div class="button">
<button class="ac">AC</button>
<button>÷</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>×</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>-</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>+</button>
<button class="zero">0</button>
<button>.</button>
<button>=</button>
</div>
</div>
</body>
</html>
CSS
@import "reset.css";
.container {
width: 300px;
}
.button {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.ac {
grid-column: 1/4;
background: #6A6A6C;
}
.zero {
grid-column: 1/3;
}
* {
box-sizing: border-box;
color: white;
}
input, button {
height: 70px;
outline: none;
}
input {
width: 100%;
text-align: right;
border: none;
background: #444445;
padding-right: 15px;
font-size: 50px;
}
button {
background: #828284;
border: 0.1px solid #454448;
font-size: 2rem;
}
button:nth-child(4n+2), button:last-child {
background-color: orange;
}
button:hover {
opacity: .5;
}
CSS - grid
- flex는 기본적으로 1차원이다.
- grid는 2차원.
- 필요에 따라서 flex와 grid를 섞어서 사용해주면 좋다.
- 부모 컨테이너에 grid로 설정해주면 자식을 전부다 grid cell로 변한다.
- 부모 : grid-template-columns, grid-template-rows, grid-template-areas, grid-gap
- 자식 : grid-columns-start, grid-columns-end, grid-row-start, grid-row-end, grid-area
