egstyle10
<meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<!-- Lightbox3 -->
<link href="/modules/editor/components/lightbox3/css/lightbox.css" rel="stylesheet" /><script src="/modules/editor/components/lightbox3/js/lightbox.min.js"></script><!-- 외부 스타일 분리 -->
<link href="/egstyle/egstyle6.css" rel="stylesheet" />
<style type="text/css">.a4-content.page1 {
justify-content: center;
align-items: center;
text-align: center;
}
.a4-content.page1 a {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: auto;
}
.a4-content.page1 .page1-img {
max-width: 60%;
max-height: 60%;
height: auto;
object-fit: contain;
margin: 0 auto;
}
.a4-content .caption-box {
border: 1px solid #ccc;
background-color: #fefefe;
padding: 1.5em;
margin-top: 1.5em;
width: 80%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
font-size: 0.95em;
font-family: 'Georgia', serif;
line-height: 1.6;
text-align: left;
}
.a4-content .caption-box h3 {
font-size: 1.2em;
margin-top: 0;
margin-bottom: 0.5em;
font-weight: bold;
border-bottom: 1px solid #ddd;
padding-bottom: 0.3em;
}
.page3-img-wrapper {
position: absolute;
top: 4%;
bottom: 4%;
left: 4%;
right: 4%;
overflow: hidden;
}
.page3-img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.page3-overlay-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
text-align: center;
text-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}
.page3-overlay-text h1 {
font-size: 2.2em;
margin: 0.2em 0;
}
.page3-overlay-text h3 {
font-size: 1.2em;
font-weight: normal;
margin: 0;
}
.page4-split, .page5-split {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.page4-top {
flex: 1;
margin-top: 0;
padding: 0 6% 0 6%;
display: flex;
justify-content: center;
align-items: flex-start;
box-sizing: border-box;
}
.page4-top img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
margin-top: 0;
}
.page4-bottom {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
padding: 2%;
box-sizing: border-box;
}
.page5-top,
.page6-top {
flex: 1;
display: flex;
justify-content: center;
align-items: flex-end;
box-sizing: border-box;
padding-top: 15%;
}
.page5-top img {
width: 50%;
height: auto;
aspect-ratio: 9 / 16;
object-fit: contain;
display: block;
margin: 0 auto;
}
.page5-bottom,
.page6-bottom {
flex: 1;
display: flex;
justify-content: center;
align-items: flex-start;
padding: 6% 2% 0 2%;
box-sizing: border-box;
}
.page6-top img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
display: block;
margin: 0 auto;
}
</style>
<!-- A4 페이지 1 -->
<div class="a4-wrapper">
<div class="a4-page">
<div class="a4-header">Frame Haze : Light & Shadow</div>
<div class="a4-content page1"><a data-lightbox="set1" data-title="Light & Shadow" href="/files/attach/images/2025/05/05/a31457c10d5b8b46fcda8923ff50a4c7.jpg"><img alt="사진 1" class="page1-img" src="/files/attach/images/2025/05/05/a31457c10d5b8b46fcda8923ff50a4c7.jpg" /> </a>
<div class="caption-box">
<h3>빛과 그림자</h3>
<p>빛과 실루엣이 만들어낸 단단한 여운.</p>
<p>프레임 속 시간은 고요하게 멈춰 있다.</p>
</div>
</div>
<div class="a4-footer">Page 1</div>
</div>
</div>
<!-- A4 페이지 2 (여백 없이 꽉 채운 이미지) -->
<div class="a4-wrapper">
<div class="a4-page">
<div class="a4-header">Frame Haze : Quiet Moments</div>
<div class="page2-img-wrapper"><a data-lightbox="set1" data-title="Quiet Moments" href="/files/attach/images/2025/05/05/d44240d10622052d43dc875040482698.jpg"><img alt="사진 2" src="/files/attach/images/2025/05/05/d44240d10622052d43dc875040482698.jpg" /> </a></div>
<div class="a4-footer">Page 2</div>
</div>
</div>
<!-- A4 페이지 3 (커버) -->
<div class="a4-wrapper">
<div class="a4-page">
<div class="a4-header">Frame Haze : Cover</div>
<div class="page3-img-wrapper"><a data-lightbox="set1" data-title="Cover" href="/files/attach/images/2025/05/05/310e007dcc9b6febfe5359c07c88379e.jpg"><img alt="사진 3" src="/files/attach/images/2025/05/05/310e007dcc9b6febfe5359c07c88379e.jpg" /> </a>
<div class="page3-overlay-text">
<h1>FRAME HAZE</h1>
<h3>빛 사이로 기억을 채우는 사진집</h3>
</div>
</div>
<div class="a4-footer">Page 3</div>
</div>
</div>
<!-- A4 페이지 4 (상단 이미지 4:3 + 하단 글상자) -->
<div class="a4-wrapper">
<div class="a4-page">
<div class="a4-header">Frame Haze : Half View</div>
<div class="page4-split">
<div class="page4-top"><a data-lightbox="set1" data-title="Split Layout" href="/files/attach/images/2025/05/05/ae0e7c02f8ed6db4707d3aa0c4f83a9b.jpg"><img alt="사진 4" src="/files/attach/images/2025/05/05/ae0e7c02f8ed6db4707d3aa0c4f83a9b.jpg" /> </a></div>
<div class="page4-bottom">
<div class="caption-box">
<h3>분할된 시선</h3>
<p>사진 위에는 하늘이 담기고, 아래에는 이야기가 담긴다.</p>
<p>이 구도는 시선을 위아래로 이끌며 감정을 나눈다.</p>
</div>
</div>
</div>
<div class="a4-footer">Page 4</div>
</div>
</div>
<!-- A4 페이지 5 (상단 세로사진 16:9 + 하단 글상자) -->
<div class="a4-wrapper">
<div class="a4-page">
<div class="a4-header">Frame Haze : Vertical View</div>
<div class="page5-split">
<div class="page5-top"><a data-lightbox="set1" data-title="Vertical Layout" href="/files/attach/images/2025/05/05/5668bb7170118ad53c8a0da52fb2dcbd.jpg"><img alt="사진 5" src="/files/attach/images/2025/05/05/5668bb7170118ad53c8a0da52fb2dcbd.jpg" /> </a></div>
<div class="page5-bottom">
<div class="caption-box">
<h3>세로의 시선</h3>
<p>높은 프레임 속에 담긴 이야기는 시선을 끌어올린다.</p>
<p>사진과 함께 위로 뻗어가는 감정선을 그려본다.</p>
</div>
</div>
</div>
<div class="a4-footer">Page 5</div>
</div>
</div>
<!-- A4 페이지 6 (정방형 이미지 + 글상자) -->
<div class="a4-wrapper">
<div class="a4-page">
<div class="a4-header">Frame Haze : Square View</div>
<div class="page5-split">
<div class="page6-top"><a data-lightbox="set1" data-title="Square Layout" href="/files/attach/images/2025/05/05/7776330245521e7be2983d5a1d06b06b.jpg"><img alt="사진 6" src="/files/attach/images/2025/05/05/7776330245521e7be2983d5a1d06b06b.jpg" /> </a></div>
<div class="page6-bottom">
<div class="caption-box">
<h3>정방형의 안정감</h3>
<p>균형 잡힌 프레임 속에서 피사체는 더욱 집중된다.</p>
<p>심플한 구도에서 깊은 인상이 전해진다.</p>
</div>
</div>
</div>
<div class="a4-footer">Page 6</div>
</div>
</div>
by eGrida posted May 06, 2025
