grid4
<meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<style type="text/css">:root {
--show-outline: 1; /* 외곽선 보이기: 1, 숨기기: 0 */
--show-grid: 1; /* 내부 선 보이기: 1, 숨기기: 0 */
--a4-width: 210mm;
--a4-height: 297mm;
}
.a4-page {
width: var(--a4-width);
height: var(--a4-height);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(10, 1fr);
box-sizing: border-box;
outline: calc(var(--show-outline) * 1px) solid #000;
}
.cell {
position: relative;
border: calc(var(--show-grid) * 1px) dashed #666;
display: flex;
align-items: center;
justify-content: center;
font-family: sans-serif;
font-size: 10px;
}
.cell::after {
content: attr(data-num);
position: absolute;
top: 4px;
left: 4px;
font-size: 9px;
color: #333;
}
@media screen and (max-width: 768px) {
.a4-page {
width: 100%;
height: auto;
aspect-ratio: 210 / 297;
}
}
</style>
<div class="a4-page"><!-- 80개 셀: 10행 × 8열 --><!-- 각 셀은 11 ~ 108까지의 규칙적인 넘버링 --><!-- 각 줄마다 8개 셀 수동 삽입 --><!-- 반복문 없이 정적인 HTML --><!-- 1행: 11~18 -->
<div class="cell" data-num="11"> </div>
<div class="cell" data-num="12"> </div>
<div class="cell" data-num="13"> </div>
<div class="cell" data-num="14"> </div>
<div class="cell" data-num="15"> </div>
<div class="cell" data-num="16"> </div>
<div class="cell" data-num="17"> </div>
<div class="cell" data-num="18"> </div>
<!-- 2행: 21~28 -->
<div class="cell" data-num="21"> </div>
<div class="cell" data-num="22"> </div>
<div class="cell" data-num="23"> </div>
<div class="cell" data-num="24"> </div>
<div class="cell" data-num="25"> </div>
<div class="cell" data-num="26"> </div>
<div class="cell" data-num="27"> </div>
<div class="cell" data-num="28"> </div>
<!-- 3행 -->
<div class="cell" data-num="31"> </div>
<div class="cell" data-num="32"> </div>
<div class="cell" data-num="33"> </div>
<div class="cell" data-num="34"> </div>
<div class="cell" data-num="35"> </div>
<div class="cell" data-num="36"> </div>
<div class="cell" data-num="37"> </div>
<div class="cell" data-num="38"> </div>
<!-- 4행 -->
<div class="cell" data-num="41"> </div>
<div class="cell" data-num="42"> </div>
<div class="cell" data-num="43"> </div>
<div class="cell" data-num="44"> </div>
<div class="cell" data-num="45"> </div>
<div class="cell" data-num="46"> </div>
<div class="cell" data-num="47"> </div>
<div class="cell" data-num="48"> </div>
<!-- 5행 -->
<div class="cell" data-num="51"> </div>
<div class="cell" data-num="52"> </div>
<div class="cell" data-num="53"> </div>
<div class="cell" data-num="54"> </div>
<div class="cell" data-num="55"> </div>
<div class="cell" data-num="56"> </div>
<div class="cell" data-num="57"> </div>
<div class="cell" data-num="58"> </div>
<!-- 6행 -->
<div class="cell" data-num="61"> </div>
<div class="cell" data-num="62"> </div>
<div class="cell" data-num="63"> </div>
<div class="cell" data-num="64"> </div>
<div class="cell" data-num="65"> </div>
<div class="cell" data-num="66"> </div>
<div class="cell" data-num="67"> </div>
<div class="cell" data-num="68"> </div>
<!-- 7행 -->
<div class="cell" data-num="71"> </div>
<div class="cell" data-num="72"> </div>
<div class="cell" data-num="73"> </div>
<div class="cell" data-num="74"> </div>
<div class="cell" data-num="75"> </div>
<div class="cell" data-num="76"> </div>
<div class="cell" data-num="77"> </div>
<div class="cell" data-num="78"> </div>
<!-- 8행 -->
<div class="cell" data-num="81"> </div>
<div class="cell" data-num="82"> </div>
<div class="cell" data-num="83"> </div>
<div class="cell" data-num="84"> </div>
<div class="cell" data-num="85"> </div>
<div class="cell" data-num="86"> </div>
<div class="cell" data-num="87"> </div>
<div class="cell" data-num="88"> </div>
<!-- 9행 -->
<div class="cell" data-num="91"> </div>
<div class="cell" data-num="92"> </div>
<div class="cell" data-num="93"> </div>
<div class="cell" data-num="94"> </div>
<div class="cell" data-num="95"> </div>
<div class="cell" data-num="96"> </div>
<div class="cell" data-num="97"> </div>
<div class="cell" data-num="98"> </div>
<!-- 10행 -->
<div class="cell" data-num="101"> </div>
<div class="cell" data-num="102"> </div>
<div class="cell" data-num="103"> </div>
<div class="cell" data-num="104"> </div>
<div class="cell" data-num="105"> </div>
<div class="cell" data-num="106"> </div>
<div class="cell" data-num="107"> </div>
<div class="cell" data-num="108"> </div>
</div>
by eGrida posted May 03, 2025