웹 메인페이지 헤더, 폰트, 헤시태그 레이아웃 수정
This commit is contained in:
sungro815
parent
8829bcd025
commit
7f61430b40
BIN
public/assets/images/common/bottom_logo.png
Normal file
BIN
public/assets/images/common/bottom_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
public/assets/images/common/top_logo.png
Normal file
BIN
public/assets/images/common/top_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
public/assets/images/web/escrow_logo.png
Normal file
BIN
public/assets/images/web/escrow_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
BIN
public/assets/images/web/payment-method.png
Normal file
BIN
public/assets/images/web/payment-method.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
@ -81,6 +81,63 @@ img {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
.logo{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.logo-img{
|
||||
height: 50px;
|
||||
width: auto; /* 비율 유지 */
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Header layout fix */
|
||||
.site-header .container{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center; /* 전체 세로 가운데 */
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.header-left{
|
||||
display: flex;
|
||||
align-items: center; /* 로고+메뉴 세로 가운데 */
|
||||
gap: 24px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.desktop-nav{
|
||||
display: flex;
|
||||
align-items: center; /* 메뉴 텍스트 세로 가운데 */
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
.nav-link{
|
||||
display: inline-flex; /* 텍스트도 박스로 잡아서 가운데 정렬 */
|
||||
align-items: center;
|
||||
height: 40px; /* 메뉴 높이 통일 */
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
/* Exchange pill (더 자연스럽게) */
|
||||
.nav-link--exchange{
|
||||
height: 40px;
|
||||
padding: 0 14px;
|
||||
border-radius: 9999px;
|
||||
background: #EFF6FF;
|
||||
border: 1px solid #BFDBFE;
|
||||
color: #2563EB;
|
||||
}
|
||||
.nav-link--exchange:hover{
|
||||
background: #2563EB;
|
||||
border-color: #2563EB;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
@ -182,7 +239,7 @@ h1, h2, h3, h4, h5, h6 {
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-size: 16px;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
@ -191,10 +248,12 @@ h1, h2, h3, h4, h5, h6 {
|
||||
color: var(--color-accent-blue);
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
.search-bar{
|
||||
position: relative;
|
||||
max-width: 520px;
|
||||
width: 100%;
|
||||
flex: 0 1 300px; /* 기본 360, 필요하면 줄어듦 */
|
||||
max-width: 300px; /* 상한 */
|
||||
min-width: 220px; /* 너무 작아지지 않게 */
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
@ -207,6 +266,11 @@ h1, h2, h3, h4, h5, h6 {
|
||||
font-size: 15px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
/*.search-input{
|
||||
height: 40px;
|
||||
padding: 0 44px 0 16px;
|
||||
font-size: 14px;
|
||||
}*/
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
@ -499,6 +563,102 @@ h1, h2, h3, h4, h5, h6 {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.auth-buttons{
|
||||
white-space: nowrap;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.nav-link--exchange{
|
||||
padding: 8px 12px;
|
||||
border-radius: 9999px;
|
||||
background: var(--color-bg-tint);
|
||||
border: 1px solid #BFDBFE;
|
||||
color: var(--color-accent-blue);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.nav-link--exchange:hover{
|
||||
background: var(--color-accent-blue);
|
||||
border-color: var(--color-accent-blue);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Hashtag chips */
|
||||
.tag-chips{
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
gap:10px;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.tag-chip{
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
height:36px;
|
||||
padding:0 14px;
|
||||
border-radius:9999px;
|
||||
border:1px solid #E5E7EB;
|
||||
background:#FFFFFF;
|
||||
color:#111827;
|
||||
font-weight:700;
|
||||
font-size:13px;
|
||||
letter-spacing:0.2px;
|
||||
text-decoration:none;
|
||||
transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
|
||||
}
|
||||
|
||||
.tag-chip:hover{
|
||||
transform: translateY(-1px);
|
||||
background:#EFF6FF;
|
||||
border-color:#93C5FD;
|
||||
color:#2563EB;
|
||||
}
|
||||
|
||||
/* 선택적으로 상위 4개만 컬러 포인트 */
|
||||
.tag-blue{ background:#EFF6FF; border-color:#93C5FD; color:#1D4ED8; }
|
||||
.tag-violet{ background:#F5F3FF; border-color:#DDD6FE; color:#6D28D9; }
|
||||
.tag-green{ background:#ECFDF5; border-color:#A7F3D0; color:#047857; }
|
||||
.tag-sky{ background:#F0F9FF; border-color:#BAE6FD; color:#0369A1; }
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.logo-img{
|
||||
height: 34px; /* 모바일에선 낮춰서 공간 확보 */
|
||||
}
|
||||
|
||||
.logo{
|
||||
margin-right: 8px; /* 여백 줄이기 */
|
||||
}
|
||||
|
||||
/* ✅ 검색폼 거의 풀폭 */
|
||||
.search-bar{
|
||||
margin: 0 !important; /* 양쪽 여백 제거 */
|
||||
flex: 1 1 auto;
|
||||
max-width: none;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.search-bar form{ width: 100%; }
|
||||
.search-input{
|
||||
width: 100%;
|
||||
padding-left: 14px;
|
||||
padding-right: 44px;
|
||||
}
|
||||
|
||||
.tag-chips{
|
||||
gap:8px;
|
||||
margin-right: -12px; /* 컨테이너 패딩 보정 원하면 */
|
||||
padding-right: 12px;
|
||||
}
|
||||
.tag-chip{
|
||||
height:34px;
|
||||
padding:0 12px;
|
||||
font-size:12.5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Mobile Breakpoint */
|
||||
@media (max-width: 768px) {
|
||||
:root {
|
||||
|
||||
@ -2,16 +2,17 @@
|
||||
<div class="container" style="height: 100%; display: flex; align-items: center; justify-content: space-between;">
|
||||
|
||||
<!-- Left: Logo & Nav -->
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="/" class="logo"
|
||||
style="font-size: 24px; font-weight: 800; color: var(--color-accent-blue); margin-right: 32px;">
|
||||
GIFTICON
|
||||
<div class="header-left">
|
||||
<a href="{{ url('/') }}" class="logo" aria-label="홈으로">
|
||||
<img src="{{ asset('assets/images/common/top_logo.png') }}"
|
||||
alt="사이트명"
|
||||
class="logo-img">
|
||||
</a>
|
||||
|
||||
<nav class="desktop-nav" style="display: flex; gap: 24px;">
|
||||
<a href="/" class="nav-link">Home</a>
|
||||
<a href="/shop" class="nav-link">Shop</a>
|
||||
<a href="/exchange" class="nav-link">상품권현금교환</a>
|
||||
<nav class="desktop-nav" aria-label="주요 메뉴">
|
||||
<a href="/" class="nav-link">HOME</a>
|
||||
<a href="/shop" class="nav-link">SHOP</a>
|
||||
<a href="/exchange" class="nav-link nav-link--exchange">상품권현금교환</a>
|
||||
<a href="/mypage" class="nav-link">마이페이지</a>
|
||||
<a href="/cs" class="nav-link">고객센터</a>
|
||||
</nav>
|
||||
@ -51,14 +52,34 @@
|
||||
<style>
|
||||
@media (max-width: 1024px) {
|
||||
|
||||
/* 메뉴/로그인만 숨김 */
|
||||
.desktop-nav,
|
||||
.search-bar,
|
||||
.auth-buttons {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* 검색은 유지 + 모바일 폭 최적화 */
|
||||
.search-bar {
|
||||
display: block !important;
|
||||
flex: 1 1 auto;
|
||||
max-width: none;
|
||||
min-width: 0;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.search-bar form { width: 100%; }
|
||||
.search-input { width: 100%; }
|
||||
|
||||
/* 햄버거 버튼 표시 */
|
||||
.mobile-menu-btn {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.site-header .container{
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -1,23 +1,21 @@
|
||||
<div class="container">
|
||||
<div class="category-chips">
|
||||
<a href="/shop?category=googleplay" class="chip">
|
||||
<img src="https://via.placeholder.com/20/2563EB/FFFFFF?text=G" alt="" style="border-radius: 4px;"> Google
|
||||
Play
|
||||
</a>
|
||||
<a href="/shop?category=paper" class="chip">
|
||||
<img src="https://via.placeholder.com/20/purple/FFFFFF?text=C" alt="" style="border-radius: 4px;"> 문상/해피/도서
|
||||
</a>
|
||||
<a href="/shop?category=online" class="chip">
|
||||
<img src="https://via.placeholder.com/20/orange/FFFFFF?text=O" alt="" style="border-radius: 4px;"> 온라인상품권
|
||||
</a>
|
||||
<a href="/shop?category=game" class="chip">
|
||||
<img src="https://via.placeholder.com/20/green/FFFFFF?text=G" alt="" style="border-radius: 4px;"> 게임전용
|
||||
</a>
|
||||
<a href="/shop?category=convenience" class="chip">
|
||||
<img src="https://via.placeholder.com/20/blue/FFFFFF?text=C" alt="" style="border-radius: 4px;"> 편의점
|
||||
</a>
|
||||
<a href="/shop?category=etc" class="chip">
|
||||
<img src="https://via.placeholder.com/20/gray/FFFFFF?text=E" alt="" style="border-radius: 4px;"> 기타
|
||||
</a>
|
||||
<div class="tag-chips" aria-label="추천 태그">
|
||||
<a href="/shop?tag=googleplay" class="tag-chip tag-blue"># GooglePlay</a>
|
||||
<a href="/shop?tag=online" class="tag-chip tag-violet"># 온라인상품권</a>
|
||||
<a href="/shop?tag=game" class="tag-chip tag-green"># 게임상품권</a>
|
||||
<a href="/shop?tag=convenience" class="tag-chip tag-sky"># 편의점</a>
|
||||
|
||||
<a href="/shop?tag=culture" class="tag-chip"># 컬쳐문화상품권</a>
|
||||
<a href="/shop?tag=nexon" class="tag-chip"># 넥슨온라인게임상품권</a>
|
||||
<a href="/shop?tag=book" class="tag-chip"># 도서문화상품권</a>
|
||||
<a href="/shop?tag=eggmoney" class="tag-chip"># 에그머니상품권</a>
|
||||
<a href="/shop?tag=cu" class="tag-chip"># CU모바일상품권</a>
|
||||
|
||||
<a href="/shop?tag=itemmania" class="tag-chip"># 아이템매니아</a>
|
||||
<a href="/shop?tag=itembay" class="tag-chip"># 아이템베이</a>
|
||||
<a href="/shop?tag=naverwebtoon" class="tag-chip"># 네이버웹툰</a>
|
||||
<a href="/shop?tag=playstation" class="tag-chip"># PlayStation</a>
|
||||
<a href="/shop?tag=starballoon" class="tag-chip"># 별풍선교환권</a>
|
||||
<a href="/shop?tag=jopalgye" class="tag-chip"># 저팔계</a>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,6 +0,0 @@
|
||||
<?php
|
||||
use Illuminate\Support\Facades\Route;
|
||||
|
||||
Route::get('/', function () {
|
||||
return view('site.home');
|
||||
})->name('site.home');
|
||||
Loading…
x
Reference in New Issue
Block a user