차량 선택 기능 추가 및 UI 개선: 차량 리스트에서 버튼으로 선택 가능하도록 변경하고, CSS 스타일 조정으로 레이아웃 및 텍스트 정렬 개선

This commit is contained in:
hyeonggil
2025-08-29 16:51:38 +09:00
parent b45f6ec501
commit 2c80fdfe48
5 changed files with 256 additions and 166 deletions

View File

@@ -171,153 +171,153 @@
<ul>
<!-- [D] 선택 시 selected 클래스 추가 -->
<li class="selected">
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드-플러그인 상품성개선</span>
</a>
<button class="car-name">
<span>쏘렌토(MQ4) 하이브리드-플러그인 상품성 개선</span>
</button>
<button type="button" class="btn-info" data-tooltip="111JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<button class="car-name">
<span>쏘렌토(MQ4) 하이브리드</span>
</a>
</button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<button class="car-name">
<span>스포티지 개조</span>
</a>
</button>
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드</span>
</a>
<button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
</button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드 리드</span>
</a>
<button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
</button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드</span>
</a>
<button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
</button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<button class="car-name">
<span>스포티지 개조</span>
</a>
</button>
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드</span>
</a>
<button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
</button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드 리드</span>
</a>
<button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 리드</span>
</button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드</span>
</a>
<button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
</button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<button class="car-name">
<span>스포티지 개조</span>
</a>
</button>
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드</span>
</a>
<button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
</button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드 리드</span>
</a>
<button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 리드</span>
</button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드</span>
</a>
<button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
</button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<button class="car-name">
<span>스포티지 개조</span>
</a>
</button>
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드</span>
</a>
<button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
</button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드 리드</span>
</a>
<button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 리드</span>
</button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드</span>
</a>
<button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
</button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<button class="car-name">
<span>스포티지 개조</span>
</a>
</button>
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드</span>
</a>
<button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
</button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드 리드</span>
</a>
<button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 리드</span>
</button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드</span>
</a>
<button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
</button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<button class="car-name">
<span>스포티지 개조</span>
</a>
</button>
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드</span>
</a>
<button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
</button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드 리드</span>
</a>
<button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 리드</span>
</button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
</ul>
@@ -704,31 +704,31 @@
<li>
<button>
<strong>쏘렌토(MQ4) 하이브리드</strong>
<em>111JH4TB2H26CC012345</em>
<em>222JH4TB2H26CC012345</em>
</button>
</li>
<li>
<button>
<strong>스포티지 개조 25</strong>
<em>111JH4TB2H26CC012345</em>
<em>333JH4TB2H26CC012345</em>
</button>
</li>
<li>
<button>
<strong>쏘렌토(MQ4) 하이브리드-플러그인 상품성 개선</strong>
<em>111JH4TB2H26CC012345</em>
<em>444JH4TB2H26CC012345</em>
</button>
</li>
<li>
<button>
<strong>쏘렌토(MQ4) 하이브리드</strong>
<em>111JH4TB2H26CC012345</em>
<em>555JH4TB2H26CC012345</em>
</button>
</li>
<li>
<button>
<strong>스포티지 개조 25</strong>
<em>111JH4TB2H26CC012345</em>
<em>666JH4TB2H26CC012345</em>
</button>
</li>
</ul>