웹 메인페이지 풋터 및 레이아웃 간격 스크롤 수정
This commit is contained in:
sungro815
parent
7f61430b40
commit
72718fa852
@ -158,8 +158,26 @@ h1, h2, h3, h4, h5, h6 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.text-h1 { font-size: 32px; line-height: 40px; }
|
.text-h1 { font-size: 32px; line-height: 40px; }
|
||||||
.text-h2 { font-size: 22px; line-height: 28px; font-weight: 600; }
|
.text-h2 {
|
||||||
.text-body { font-size: 16px; }
|
margin: 0;
|
||||||
|
font-size: 15px; /* 여기서 더 줄이고 싶으면 15px */
|
||||||
|
line-height: 22px;
|
||||||
|
font-weight: 800;
|
||||||
|
color: #111827;
|
||||||
|
letter-spacing: -0.2px;
|
||||||
|
}
|
||||||
|
.text-h2::before{
|
||||||
|
content: none !important;
|
||||||
|
}
|
||||||
|
.text-body{
|
||||||
|
margin: 0;
|
||||||
|
font-size: 14px; /* 원래 크기 */
|
||||||
|
line-height: 20px;
|
||||||
|
color: #6B7280;
|
||||||
|
white-space: normal;
|
||||||
|
overflow: visible;
|
||||||
|
text-overflow: clip;
|
||||||
|
}
|
||||||
.text-sm { font-size: 14px; }
|
.text-sm { font-size: 14px; }
|
||||||
.text-xs { font-size: 12px; }
|
.text-xs { font-size: 12px; }
|
||||||
|
|
||||||
@ -473,20 +491,51 @@ h1, h2, h3, h4, h5, h6 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Sections */
|
/* Sections */
|
||||||
.section {
|
.section{
|
||||||
padding: 60px 0;
|
padding: 25px 0; /* 더 타이트 */
|
||||||
|
}
|
||||||
|
.section + .section{
|
||||||
|
padding-top: 16px; /* 섹션 사이 과한 간격 제거 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-header {
|
.section-header{
|
||||||
display: flex;
|
margin-bottom: 10px;
|
||||||
justify-content: space-between;
|
|
||||||
align-items: flex-end;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-title h2 {
|
.section-title{
|
||||||
font-size: 28px;
|
display: flex !important;
|
||||||
margin-bottom: 8px;
|
align-items: center !important;
|
||||||
|
gap: 12px !important;
|
||||||
|
flex-wrap: nowrap !important;
|
||||||
|
min-width: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title .text-h2{
|
||||||
|
margin: 0 !important;
|
||||||
|
font-size: 22px !important;
|
||||||
|
line-height: 22px !important;
|
||||||
|
font-weight: 800 !important;
|
||||||
|
color: #111827 !important;
|
||||||
|
|
||||||
|
white-space: nowrap !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
text-overflow: clip !important;
|
||||||
|
flex: 0 0 auto !important;
|
||||||
|
}
|
||||||
|
.section-title .text-h2::before{
|
||||||
|
content: none !important;
|
||||||
|
}
|
||||||
|
.section-title .text-body{
|
||||||
|
margin: 0 !important;
|
||||||
|
font-size: 14px !important;
|
||||||
|
line-height: 20px !important;
|
||||||
|
color: #6B7280 !important;
|
||||||
|
|
||||||
|
min-width: 0 !important;
|
||||||
|
white-space: nowrap !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
text-overflow: clip !important;
|
||||||
|
flex: 1 1 auto !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-title p {
|
.section-title p {
|
||||||
@ -494,21 +543,45 @@ h1, h2, h3, h4, h5, h6 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Snap Carousel (Monthly Deals) */
|
/* Snap Carousel (Monthly Deals) */
|
||||||
.snap-carousel {
|
.snap-carousel{
|
||||||
display: flex;
|
display:flex;
|
||||||
gap: 24px;
|
gap:16px;
|
||||||
overflow-x: auto;
|
overflow-x:auto;
|
||||||
scroll-snap-type: x mandatory;
|
overflow-y:hidden;
|
||||||
padding-bottom: 24px; /* for shadow */
|
-webkit-overflow-scrolling: touch;
|
||||||
scrollbar-width: none;
|
padding-bottom: 8px;
|
||||||
|
}
|
||||||
|
.snap-carousel > *{
|
||||||
|
scroll-snap-align: start; /* 원치 않으면 삭제 */
|
||||||
|
flex: 0 0 auto;
|
||||||
}
|
}
|
||||||
.snap-carousel::-webkit-scrollbar { display: none; }
|
|
||||||
|
|
||||||
.snap-item {
|
.snap-carousel::-webkit-scrollbar{ height: 8px; }
|
||||||
scroll-snap-align: start;
|
.snap-carousel::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.15); border-radius: 999px; }
|
||||||
|
|
||||||
|
.snap-item{
|
||||||
flex: 0 0 280px;
|
flex: 0 0 280px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#popular .snap-item{
|
||||||
|
flex-basis: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.snap-carousel{
|
||||||
|
scrollbar-width: thin; /* Firefox */
|
||||||
|
}
|
||||||
|
.snap-carousel::-webkit-scrollbar{
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
.snap-carousel::-webkit-scrollbar-thumb{
|
||||||
|
background: rgba(0,0,0,.15);
|
||||||
|
border-radius: 999px;
|
||||||
|
}
|
||||||
|
.snap-carousel::-webkit-scrollbar-track{
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Filter Tabs */
|
/* Filter Tabs */
|
||||||
.filter-tabs {
|
.filter-tabs {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -621,6 +694,7 @@ h1, h2, h3, h4, h5, h6 {
|
|||||||
.tag-green{ background:#ECFDF5; border-color:#A7F3D0; color:#047857; }
|
.tag-green{ background:#ECFDF5; border-color:#A7F3D0; color:#047857; }
|
||||||
.tag-sky{ background:#F0F9FF; border-color:#BAE6FD; color:#0369A1; }
|
.tag-sky{ background:#F0F9FF; border-color:#BAE6FD; color:#0369A1; }
|
||||||
|
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
.logo-img{
|
.logo-img{
|
||||||
height: 34px; /* 모바일에선 낮춰서 공간 확보 */
|
height: 34px; /* 모바일에선 낮춰서 공간 확보 */
|
||||||
@ -655,6 +729,13 @@ h1, h2, h3, h4, h5, h6 {
|
|||||||
padding:0 12px;
|
padding:0 12px;
|
||||||
font-size:12.5px;
|
font-size:12.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.section-title .text-h2{ font-size: 15px !important; }
|
||||||
|
.section-title .text-body{ font-size: 13px !important; }
|
||||||
|
|
||||||
|
.text-body{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -672,9 +753,9 @@ h1, h2, h3, h4, h5, h6 {
|
|||||||
|
|
||||||
.hero-title { font-size: 28px; }
|
.hero-title { font-size: 28px; }
|
||||||
|
|
||||||
.search-bar {
|
/* .search-bar {
|
||||||
display: none; /* Handle mobile search differently */
|
display: none; !* Handle mobile search differently *!
|
||||||
}
|
}*/
|
||||||
|
|
||||||
.footer-grid {
|
.footer-grid {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
@ -686,3 +767,154 @@ h1, h2, h3, h4, h5, h6 {
|
|||||||
padding-right: 24px;
|
padding-right: 24px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
/* ===== Footer: modern & clean (light) ===== */
|
||||||
|
.site-footer{
|
||||||
|
background:#F8FAFC;
|
||||||
|
border-top: 1px solid #E5E7EB;
|
||||||
|
padding: 44px 0 28px;
|
||||||
|
margin-top: 48px;
|
||||||
|
color:#0F172A;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-top{
|
||||||
|
display:grid;
|
||||||
|
grid-template-columns: 1.2fr 0.8fr 1fr 1fr;
|
||||||
|
gap: 28px;
|
||||||
|
align-items:start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-title{
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 800;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
color:#0F172A;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-brand-logo{ display:inline-flex; align-items:center; }
|
||||||
|
.footer-logo-img{ height: 50px; width:auto; display:block; }
|
||||||
|
|
||||||
|
.footer-desc{
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.6;
|
||||||
|
color:#64748B;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-copy{
|
||||||
|
margin-top: 14px;
|
||||||
|
font-size: 12px;
|
||||||
|
color:#94A3B8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-link-list{ display:flex; flex-direction:column; gap: 10px; }
|
||||||
|
.footer-link{
|
||||||
|
color:#475569;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.footer-link:hover{ color:#2563EB; }
|
||||||
|
.footer-link-strong{ font-weight: 800; color:#111827; }
|
||||||
|
|
||||||
|
/* contact KV */
|
||||||
|
.footer-kv{ display:flex; flex-direction:column; gap: 10px; }
|
||||||
|
.footer-kv-row{
|
||||||
|
display:grid;
|
||||||
|
grid-template-columns: 72px 1fr;
|
||||||
|
gap: 10px;
|
||||||
|
font-size: 13px;
|
||||||
|
color:#475569;
|
||||||
|
}
|
||||||
|
.footer-k{ color:#94A3B8; }
|
||||||
|
.footer-v{ color:#334155; }
|
||||||
|
|
||||||
|
/* payment */
|
||||||
|
.footer-payment-col .footer-payment{
|
||||||
|
display:flex;
|
||||||
|
flex-direction:column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
.footer-payment--mt{ margin-top: 14px; }
|
||||||
|
|
||||||
|
.footer-pay-img{
|
||||||
|
width:auto;
|
||||||
|
max-width: 100%;
|
||||||
|
height:auto;
|
||||||
|
display:block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-pay-caption{
|
||||||
|
font-size: 12px;
|
||||||
|
color:#64748B;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* divider */
|
||||||
|
.footer-divider{
|
||||||
|
height:1px;
|
||||||
|
background:#E5E7EB;
|
||||||
|
margin: 24px 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* bottom details */
|
||||||
|
.footer-details{
|
||||||
|
background:#FFFFFF;
|
||||||
|
border: 1px solid #E5E7EB;
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 12px 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-summary{
|
||||||
|
cursor:pointer;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 800;
|
||||||
|
color:#111827;
|
||||||
|
display:flex;
|
||||||
|
align-items:center;
|
||||||
|
justify-content:space-between;
|
||||||
|
gap: 12px;
|
||||||
|
list-style:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-summary::-webkit-details-marker{ display:none; }
|
||||||
|
|
||||||
|
.footer-summary-hint{
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
color:#2563EB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-details[open] .footer-summary-hint{
|
||||||
|
color:#64748B;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-info{
|
||||||
|
margin-top: 12px;
|
||||||
|
display:grid;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-info-row{
|
||||||
|
display:grid;
|
||||||
|
grid-template-columns: 130px 1fr;
|
||||||
|
gap: 12px;
|
||||||
|
font-size: 12.5px;
|
||||||
|
color:#475569;
|
||||||
|
}
|
||||||
|
.footer-info-row span{ color:#94A3B8; }
|
||||||
|
.footer-info-row b{ color:#334155; font-weight:700; }
|
||||||
|
|
||||||
|
/* responsive */
|
||||||
|
@media (max-width: 1024px){
|
||||||
|
.footer-top{
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 560px){
|
||||||
|
.footer-top{
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
.footer-info-row{
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -125,5 +125,4 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
alert('모바일 메뉴 드로어 열림 (구현 예정)');
|
alert('모바일 메뉴 드로어 열림 (구현 예정)');
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|||||||
@ -1,38 +1,100 @@
|
|||||||
<footer class="site-footer">
|
<footer class="site-footer">
|
||||||
<div class="container footer-grid">
|
<div class="container">
|
||||||
<!-- Col 1: Brand -->
|
|
||||||
<div>
|
{{-- Top --}}
|
||||||
<div style="font-size: 20px; font-weight: 700; color: white; margin-bottom: 16px;">GIFTICON</div>
|
<div class="footer-top">
|
||||||
<p style="font-size: 14px; color: #9CA3AF; line-height: 1.6;">
|
{{-- Brand --}}
|
||||||
|
<div class="footer-brand">
|
||||||
|
<a href="{{ url('/') }}" class="footer-brand-logo" aria-label="홈으로">
|
||||||
|
<img src="{{ asset('assets/images/common/bottom_logo.png') }}"
|
||||||
|
alt="PIN FOR YOU"
|
||||||
|
class="footer-logo-img">
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<p class="footer-desc">
|
||||||
대한민국 1등 상품권 거래소.<br>
|
대한민국 1등 상품권 거래소.<br>
|
||||||
안전하고 빠른 거래를 약속드립니다.
|
안전하고 빠른 거래를 약속드립니다.
|
||||||
</p>
|
</p>
|
||||||
<div style="margin-top: 24px; font-size: 12px; color: #6B7280;">
|
|
||||||
© 2024 Gifticon Corp. All rights reserved.
|
<div class="footer-copy">
|
||||||
|
© 2018 plusmaker Corp. All rights reserved.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Col 2: Links -->
|
{{-- Links --}}
|
||||||
<div>
|
<div class="footer-links">
|
||||||
<h4 style="color: white; margin-bottom: 20px;">고객지원</h4>
|
<h4 class="footer-title">고객지원</h4>
|
||||||
|
<div class="footer-link-list">
|
||||||
<a href="#" class="footer-link">공지사항</a>
|
<a href="#" class="footer-link">공지사항</a>
|
||||||
<a href="#" class="footer-link">자주 묻는 질문</a>
|
<a href="#" class="footer-link">자주 묻는 질문</a>
|
||||||
<a href="#" class="footer-link">1:1 문의</a>
|
<a href="#" class="footer-link">1:1 문의</a>
|
||||||
<a href="#" class="footer-link">이용약관</a>
|
<a href="#" class="footer-link">이용약관</a>
|
||||||
<a href="#" class="footer-link" style="font-weight: 600;">개인정보처리방침</a>
|
<a href="#" class="footer-link footer-link-strong">개인정보처리방침</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Col 3: Contact -->
|
{{-- Contact --}}
|
||||||
<div>
|
<div class="footer-contact">
|
||||||
<h4 style="color: white; margin-bottom: 20px;">Contact</h4>
|
<h4 class="footer-title">Contact</h4>
|
||||||
<p style="margin-bottom: 8px;">고객센터: 1544-0000</p>
|
<div class="footer-kv">
|
||||||
<p style="margin-bottom: 8px;">운영시간: 평일 09:00 - 18:00</p>
|
<div class="footer-kv-row">
|
||||||
<p style="margin-bottom: 24px;">이메일: help@gifticon.com</p>
|
<span class="footer-k">고객센터</span>
|
||||||
|
<span class="footer-v">1833-4856</span>
|
||||||
|
</div>
|
||||||
|
<div class="footer-kv-row">
|
||||||
|
<span class="footer-k">운영시간</span>
|
||||||
|
<span class="footer-v">평일 09:00 - 18:00</span>
|
||||||
|
</div>
|
||||||
|
<div class="footer-kv-row">
|
||||||
|
<span class="footer-k">메일</span>
|
||||||
|
<span class="footer-v">master@plusmaker.co.kr</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div style="padding: 12px; background: rgba(255,255,255,0.05); border-radius: 8px;">
|
{{-- Payment --}}
|
||||||
<p style="font-size: 12px; color: #9CA3AF; margin-bottom: 4px;">구매안전 서비스</p>
|
<div class="footer-payment-col">
|
||||||
<p style="font-size: 13px; color: white;">KG Inicis 에스크로 적용됨</p>
|
<h4 class="footer-title">Payment</h4>
|
||||||
|
|
||||||
|
<div class="footer-payment">
|
||||||
|
<img class="footer-pay-img"
|
||||||
|
src="{{ asset('assets/images/web/escrow_logo.png') }}"
|
||||||
|
alt="Danal escrow service" style="width:60px">
|
||||||
|
<div class="footer-pay-caption">Danal escrow service</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-payment footer-payment--mt">
|
||||||
|
<img class="footer-pay-img"
|
||||||
|
src="{{ asset('assets/images/web/payment-method.png') }}"
|
||||||
|
alt="Secured Payment Gateways" style="width:170px">
|
||||||
|
<div class="footer-pay-caption">Secured Payment Gateways</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{{-- Divider --}}
|
||||||
|
<div class="footer-divider"></div>
|
||||||
|
|
||||||
|
{{-- Bottom: Corporation Info (collapsible) --}}
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<details class="footer-details">
|
||||||
|
<summary class="footer-summary">
|
||||||
|
사업자 정보 (Corporation info)
|
||||||
|
<span class="footer-summary-hint">펼치기</span>
|
||||||
|
</summary>
|
||||||
|
|
||||||
|
<div class="footer-info">
|
||||||
|
<div class="footer-info-row"><span>상호</span><b>(주) 플러스메이커</b></div>
|
||||||
|
<div class="footer-info-row"><span>대표</span><b>송병수</b></div>
|
||||||
|
<div class="footer-info-row"><span>주소</span><b>전북특별자치도 전주시 완산구 용마리로 94, 4층 451호</b></div>
|
||||||
|
<div class="footer-info-row"><span>전화</span><b>1833-4856</b></div>
|
||||||
|
<div class="footer-info-row"><span>메일</span><b>master@plusmaker.co.kr</b></div>
|
||||||
|
<div class="footer-info-row"><span>사업자등록번호</span><b>121-88-01191</b></div>
|
||||||
|
<div class="footer-info-row"><span>통신판매업신고번호</span><b>제 2018-전주완산-0705호</b></div>
|
||||||
|
<div class="footer-info-row"><span>개인정보관리책임자</span><b>송병수</b></div>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
@ -11,8 +11,8 @@
|
|||||||
|
|
||||||
<nav class="desktop-nav" aria-label="주요 메뉴">
|
<nav class="desktop-nav" aria-label="주요 메뉴">
|
||||||
<a href="/" class="nav-link">HOME</a>
|
<a href="/" class="nav-link">HOME</a>
|
||||||
<a href="/shop" class="nav-link">SHOP</a>
|
<a href="/shop" class="nav-link nav-link--exchange">SHOP</a>
|
||||||
<a href="/exchange" class="nav-link nav-link--exchange">상품권현금교환</a>
|
{{-- <a href="/exchange" class="nav-link nav-link--exchange">상품권현금교환</a>--}}
|
||||||
<a href="/mypage" class="nav-link">마이페이지</a>
|
<a href="/mypage" class="nav-link">마이페이지</a>
|
||||||
<a href="/cs" class="nav-link">고객센터</a>
|
<a href="/cs" class="nav-link">고객센터</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
<div style="overflow-x: auto; padding-bottom: 24px;">
|
<div class="snap-carousel">
|
||||||
<div style="display: flex; gap: 16px;">
|
|
||||||
@for($i = 1; $i <= 8; $i++)
|
@for($i = 1; $i <= 8; $i++)
|
||||||
<div style="flex: 0 0 200px;">
|
<div class="snap-item" style="flex: 0 0 200px;">
|
||||||
<div class="product-card">
|
<div class="product-card">
|
||||||
<div class="card-thumb" style="aspect-ratio: 1/1;">
|
<div class="card-thumb" style="aspect-ratio: 1/1;">
|
||||||
<span style="color: #9CA3AF;">Icon</span>
|
<span style="color: #9CA3AF;">Icon</span>
|
||||||
@ -16,5 +15,4 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@endfor
|
@endfor
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
Loading…
x
Reference in New Issue
Block a user