영보의 SystemOut.log

[HTML] <select > <option> 셀렉트 박스 넣기 본문

Web/HTML CSS

[HTML] <select > <option> 셀렉트 박스 넣기

영보로그 2020. 10. 30. 17:41
반응형

# <select> 태그 
- html/css 코드에서 사용되는 쉽고 간단한 다중 값 입력 폼
 - 화살표를 통해서 선택이 가능


# 예제 

1
2
3
4
5
<select name="웹 스터디">
<option value="React">React</option>
<option value="JPA">JPA</option>
<option selected="selected" value="웹 스터디">웹 스터디</option>
</select>
cs

 → 웹 스터디를 기본 값으로 설정 하였다.

 → 예제코드 위 참조.

 

 

# 실전 예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="section-top-border">
    <h3 class="mb-30">채용공고</h3>
        <div class="list_option" style="text-align: right;">                    
            <form method="post" style="display: inline;">
                    <select class="selectpicker" onchange="window.open(value,'_self');"
                            style="display: inline; width: 50px; height:10px; font-size:10px;">    
                            <option>태그 선택</option>
                            <option value="listByTag.do?tag=서울">서울</option>
                            <option value="listByTag.do?tag=경기">경기</option>
                            <option value="listByTag.do?tag=인천">인천</option>
                            <option value="listByTag.do?tag=부산">부산</option>
                            <option value="listByTag.do?tag=대구">대구</option>
                            <option value="listByTag.do?tag=광주">광주</option>
                            <option value="listByTag.do?tag=대전">대전</option>
                            <option value="listByTag.do?tag=강원">강원</option>
                            <option value="listByTag.do?tag=제주">제주</option>
                            <option value="listByTag.do?tag=전국">전국</option>
                    </select>
            </form>
        </div>
</div>
cs

 - 실제제 웹 프로젝트르 하면서 셀렉트 박스가 있는 코드를 가지고 와 보았다.

 

  비루하지만 출력 화면

반응형

'Web > HTML CSS' 카테고리의 다른 글

[HTML] href 태그 새창에서 열기  (0) 2021.08.10
[HTML/CSS] CSS기초 익히기  (0) 2020.09.19
[HTML] HTML의 기본 태그들 / HTML 기초  (2) 2020.08.18
[HTML] HTML이란 / HTML 기본구조  (0) 2020.08.14