728x90
반응형
드롭바를 만드는 방법
드롭바를 만드는 방법은 select, option을 이용한 방법과 ol, ul, li를 이용한 방법이 있다
select, option 태그는 기본적으로 드롭바를 만들어 주는 옵션이라 만들기가 비교적 쉽지만 기본 틀이 짜여져 있기 때문에 CSS 등을 손보는게 비교적 귀찮다
그래서 드롭바를 검색했을 경우 ol, ul, li태그를 이용하는 경우가 많다
select tag
내가 사용한 select tag는
<select id="c_list" onchange="select_list()">
<optgroup label="단어">
<option value="1">TOCFL 준비1(準備級一級)</option>
<option value="2">TOCFL 준비2(準備級二級)</option>
<option value="3">TOCFL Band A-1(入門級)</option>
<option value="4">TOCFL Band A-2(基礎級)</option>
<option value="5">TOCFL Band B-3(進階級)</option>
<option value="6">TOCFL Band B-4(高階級)</option>
<option value="7">TOCFL Band C-5,6(流利級)</option>
<option value="8">HSK 1</option>
<option value="9">HSK 2</option>
<option value="10">HSK 3</option>
<option value="11">HSK 4</option>
<option value="12">HSK 5</option>
<option value="13">HSK 6</option>
</optgroup>
<optgroup label="개인소장자료">
<option value="14">한자</option>
<option value="15">단어</option>
</optgroup>
<optgroup label="문장">
<option value="16">영화:그시절 우리가 좋아했던 소녀</option>
<option value="17">영화:나의 소녀시대</option>
<option value="18">드라마:상견니 명장면-1</option>
<option value="19">드라마:상견니 명장면-2</option>
<option value="20">노래:831-想見你想見你想見你</option>
<option value="21">노래:伍佰-LAST DANCE</option>
</optgroup>
</select>드롭바 box를 만들어준다
optgroup 태그는 선택할순 없는 태그이며 옵션을 감싸주면 해당 옵션을 그룹화한것처럼 볼 수 있다
option 태그는 드롭바 안에 사용하며 select의 목록으로 사용한다
select 속성값으로 onchange="select_list()"를 주어서 select 안의 옵션값이 바뀔때마다 select_list()라는 javascript함수가 실행 된다
select_list() 함수는 select 값안의 option 속성의 value(값)을 받아와 다음 행위를 이어나가게 만들었다
결과값
728x90
반응형
