grid 2p
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A4 Web Gallery - 두 페이지</title>
<style>
:root {
--show-outline: 1;
--show-grid: 1;
--a4-width: 210mm;
--a4-height: 297mm;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.page-break {
page-break-after: always;
}
.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);
outline: calc(var(--show-outline) * 1px) solid #000;
break-inside: avoid;
}
.cell {
border: calc(var(--show-grid) * 1px) dashed #666;
display: flex;
align-items: center;
justify-content: center;
font-family: sans-serif;
font-size: 10px;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
text-align: center;
padding: 4px;
white-space: normal;
word-break: break-word;
}
.cell.header {
background-color: #d0d0d0;
font-weight: bold;
}
.cell.footer {
background-color: #d0d0d0;
font-style: italic;
}
.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>
</head>
<body>
<div class="a4-page">
<!-- Page 1 -->
<div class="cell header" data-num="11">촬영일자</div><div class="cell header" data-num="12">사진가</div><div class="cell header" data-num="13">카메라</div><div class="cell header" data-num="14">렌즈</div><div class="cell header" data-num="15">필름/설정</div><div class="cell header" data-num="16">장소</div><div class="cell header" data-num="17">모델</div><div class="cell header" data-num="18">비고</div>
<!-- Body Cells: 21~98 -->
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<!-- Footer Row: 101~108 -->
<div class="cell footer" data-num="101">© Frame Haze</div><div class="cell footer" data-num="102">2025 Portfolio</div><div class="cell footer" data-num="103">egrida.net</div><div class="cell footer" data-num="104">Page 1</div><div class="cell footer" data-num="105">A4 Size</div><div class="cell footer" data-num="106">All Rights Reserved</div><div class="cell footer" data-num="107">Printed Ver.</div><div class="cell footer" data-num="108">Contact: iam@egrida.net</div>
</div>
<div class="page-break"></div>
<div class="a4-page">
<!-- Page 2 -->
<div class="cell header" data-num="11">촬영일자</div><div class="cell header" data-num="12">사진가</div><div class="cell header" data-num="13">카메라</div><div class="cell header" data-num="14">렌즈</div><div class="cell header" data-num="15">필름/설정</div><div class="cell header" data-num="16">장소</div><div class="cell header" data-num="17">모델</div><div class="cell header" data-num="18">비고</div>
<!-- Body Cells: 21~98 -->
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<!-- Footer Row: 101~108 -->
<div class="cell footer" data-num="101">© Frame Haze</div><div class="cell footer" data-num="102">2025 Portfolio</div><div class="cell footer" data-num="103">egrida.net</div><div class="cell footer" data-num="104">Page 2</div><div class="cell footer" data-num="105">A4 Size</div><div class="cell footer" data-num="106">All Rights Reserved</div><div class="cell footer" data-num="107">Printed Ver.</div><div class="cell footer" data-num="108">Contact: iam@egrida.net</div>
</div>
</body>
</html>
by eGrida posted May 04, 2025