반응형
1. <select> 그룹 태그에 링크 넣기
예시 01) <select>박스 링크 걸기 | 예시 02) <select>그룹박스 링크 걸기 |
<select> 태그는 예시 01 처럼 리스트로 만들 수 있고 예시 02처럼 그룹화 리스트를 만들 수 있다.
● 그럼, <select> 리스트에 링크를 거는 방법은?
<select name="none" onchange="window.open(value,'_blank');">
<option value="none" >------ 관련 사이트 ------</option>
<optgroup label="그룹001">
<option value="http://kosen21.org">코센(KOSEN)</option>
<option value="https://www.nkis.re.kr:4445">국가정책연구포털(NKIS)</option>
<option value="http://www.eaerweb.org">East Asian Economic Review</option>
</optgroup>
<optgroup label="그룹002">
<option value="http://www.kisti.re.kr">한국과학기술정보연구원</option>
<option value="http://www.nrc.re.kr">경제인문사회연구회</option>
<option value="http://www.kiep.go.kr">대외경제정책연구원</option>
</optgroup>
<option value="http://www.google.com">구글</option>
<option value="http://www.naver.com">네이버</option>
<option value="http://www.daum.net">다음</option>
</select>
<select> 태그에 window.open(value,'_blank'); 넣어주고 <option>에 value="링크 주소" 입력하면 된다.
반응형
'프론트엔드 > HTML' 카테고리의 다른 글
<a>태그 href 속성 #, #none 및 taget, title 속성 파해치기 (0) | 2021.03.10 |
---|---|
[HTML] 라디오버튼(radio button) 체크박스(check box) 버튼 차이점 (0) | 2020.08.18 |
[HTML] h1, h2, h3, h4, h5, h6 제목 태그 개념 다지기 (2) | 2020.08.17 |
[HTML] 스타일 태그 ID / CLASS 선택자 개념 사용법 속성 (0) | 2020.08.13 |
[HTML] 웹접근성 Skip Menu 스킵메뉴 / Skip Navigation 스킵 네비 만들기 (0) | 2020.08.13 |