Portfolio


gap: 20px 5px;


/*item*/
.item {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-column : 1 / span 2;
}


/*item*/
.item {
	grid-row-start: 1;
	grid-row-end: 2;
	grid-row : 1 / span 2;
}


<!DOCTYPE html>
<html>

<head>
	<title>Parcel Sandbox</title>
	<meta charset="UTF-8" />
	<link rel="stylesheet" href="./src/styles.css">
</head>

<body>
<div class="container">
		<div class="row-1">
        <input type="text" />
    </div>
		<div class="row-2">
        <button type="button" class="reset-btn">AC</button>
        <button type="button" class="etc-btn">+/-</button>
        <button type="button" class="percentage-btn">%</button>
        <button type="button" class="calc" value="divide">÷</button>
      </div>
      <div class="row-3">
        <button type="button" class="number">7</button>
        <button type="button" class="number">8</button>
        <button type="button" class="number">9</button>
        <button type="button" class="calc" value="multiply">×</button>
      </div>
      <div class="row-4">
        <button type="button" class="number">4</button>
        <button type="button" class="number">5</button>
        <button type="button" class="number">6</button>
        <button type="button" class="calc" value="minus">-</button>
      </div>
      <div class="row-5">
        <button type="button" class="number">1</button>
        <button type="button" class="number">2</button>
        <button type="button" class="number">3</button>
        <button type="button" class="calc" value="plus">+</button>
      </div>
      <div class="row-6">
        <button type="button" class="number">0</button>
        <button type="button" class="number">.</button>
        <button type="button" class="result-btn" class="result">=</button>
      </div>
</div>
</body>

</html>


body {
  font-family: sans-serif;
  box-sizing: border-box;
}

.container {
  padding: 10px;
  display: grid;
  grid-template-rows: repeat(6, 80px);
  gap: 10px;
  background: #000000;
}

div[class^="row"] {
  display: grid;
  grid-template-columns: repeat(4, 80px);
  gap: 10px;
}

input {
  grid-column: 1 / span 4;
  text-align: right;
  background: #0000;
  border: none;
  color: #ffff;
  font-size: 55px;
}

input:focus {
  outline: none;
}

button {
  border-radius: 50%;
  font-size: 30px;
  border: none;
  background: #c4c4c4;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.4s;
}

.row-6 button:first-child {
  grid-column: 1/3;
  border-radius: 60px;
}

.number {
  background: #333333;
}

.calc,
.result-btn {
  background: #fe9f06;
  color: #fff;
}

.number:active,
.reset-btn:active,
.etc-btn:active,
.percentage-btn:active,
.result-btn:active {
  opacity: 0.6;
}

.calc:focus {
  background: #fff;
  color: #fe9f06;
}

12. Grid

1. Grid

2. Grid row / column

1) template

3. Gap

4. 각 셀의 영역 지정

실습1

실습 2

(실습) 전체 복습 코드 및 성배 레이아웃 그리기