문제 내용

select 태그의 option 안에

텍스트 왼쪽에 작은 이미지를 함께 표시하고 싶었음

문제 인지

• select - option 태그는 HTML 구조상 내부에 img 태그를 포함할 수 없음
• CSS로도 option 내부 레이아웃 제어에 한계가 있음

해결 방안 모색

• 기본 select 태그 대신

  div + ul / li 구조를 이용한 커스텀 셀렉트 박스 구현

• 이를 통해 이미지와 텍스트를 자유롭게 배치 가능

해결 방안

1. HTML 구조 설계

• div : 전체 셀렉트 박스 컨테이너
• div.selected : 현재 선택된 값 표시 영역
• ul.options : 선택 가능한 옵션 목록
• li : 이미지 + 텍스트

<div class="custom-select">
		<div class="selected">
			<img src="/histudy/images/coding.png">
			<span>코딩</span>
		</div>
		<ul class="options">
			<li><img src="/histudy/images/coding.png"> 코딩</li>
			<li><img src="/histudy/images/certification.png"> 자격증</li>
			<li><img src="/histudy/images/employe.png"> 취업</li>
			<li><img src="/histudy/images/studying.png"> 학업</li>
			<li><img src="/histudy/images/languages.png"> 언어</li>
			<li><img src="/histudy/images/self-improvement.png"> 자기계발</li>
		</ul>
</div>

2. CSS 처리