GNB & 차량 리스트 개선 UX _20250804

This commit is contained in:
2025-08-10 22:12:44 +09:00
parent 02a97a7e88
commit e51a668184
7 changed files with 5029 additions and 4537 deletions

View File

@@ -86,8 +86,9 @@
<div class="mobileCarlist">
<a href="javascript:void(0)" class="mobilecarItem">
<div class="item">
<span>MV</span>
<span>161어 1660</span>
<!-- <span>MV</span>
<span>161어 1660</span> -->
쏘렌토(MQ4) 하이브리드-플러그인 상품성개선
</div>
<div class="arrow"></div>
</a>
@@ -180,8 +181,9 @@
<!-- PC 전용 차량 선택 UI입니다. -->
<div class="carlist">
<a href="javascript:void(0)" class="carItem">
<span>MV</span>
<span>161어 1660</span>
<!-- <span>MV</span>
<span>161어 1660</span> -->
<span>쏘렌토(MQ4) 하이브리드-플러그인 상품성개선</span>
</a>
<div class="carlistItem">
<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg" class="boxBullet">
@@ -189,23 +191,155 @@
<path d="M1 9L7 1L13 9" stroke="#DEDEDE" />
</svg>
<ul>
<li>
<li class="selected">
<a href="javascript:void(0)">
<span>MV</span>
<span>KMTKEXXBPMU000081</span>
<span>쏘렌토(MQ4) 하이브리드-플러그인 상품성개선플러그인 상품성개선</span>
</a>
<button type="button" class="btn-info" data-tooltip="111JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>SX</span>
<span>161어 1660</span>
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드</span>
</a>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>MV</span>
<span>452허 1234</span>
<span>스포티지 개조</span>
</a>
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드</span>
</a>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드 리드</span>
</a>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드</span>
</a>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>스포티지 개조</span>
</a>
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드</span>
</a>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드 리드</span>
</a>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드</span>
</a>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>스포티지 개조</span>
</a>
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드</span>
</a>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드 리드</span>
</a>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드</span>
</a>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>스포티지 개조</span>
</a>
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드</span>
</a>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드 리드</span>
</a>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드</span>
</a>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>스포티지 개조</span>
</a>
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드</span>
</a>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드 리드</span>
</a>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드</span>
</a>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>스포티지 개조</span>
</a>
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드</span>
</a>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드 리드</span>
</a>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
</ul>
</div>