HTML 셀렉스 박스 선택과 링크 걸기 - HTML과 CSS로 셀렉스 박스(Select box) 커스텀 디자인
페이지 정보
조회 1,761회 작성일 22-07-24 01:04
본문
셀렉스 박스 선택과 링크 걸기
HTML과 CSS로 셀렉스 박스(Select box) 커스텀 디자인
홈페이지에서 선택에 사용되는 선택 박스를 만드는 방법을 설명하려고 한다.
Select box셀렉트 박스를 아래서 예를 드는 HTML 태그와 CSS 커스텀 디자인 등의 예제와 비교하면 이해가 편할 것이다.
셀렉스 박스 선택과 링크 걸기 - HTML과 CSS로 셀렉스 박스(Select box) 커스텀 디자인
셀렉스 박스(Select box) 만드는 방법
선택 박스는 select 태그가 필요하고, 그것을 눌렀을 때 나타나는 option이 있어야 한다. 기본적인 예제는 아래와 같다.
[code]
<select>
<option value="선택값">메뉴</option>
<option value="선택값">메뉴</option>
</select>
[/code]
여기서 "메뉴"는 셀렉스 선택 상자를 클릭했을 때 주주룩 나오는 것들이고, "선택값"은 그것을 선택했을 때 넘겨줄 값이다.
예를 들어, <option value="20살~29살">20대</option> 이렇게 만들면, 20대라는 메뉴를 고르는 순간 20살~29살이라는 값이 넘겨져서 이용되는 것이다.
그런데, 애초에 대푯값이 선택된 상태로 보이게 하고 싶다면(그러니까, 셀렉스 박스가 나타날 때 메뉴 중 하나가 보이게 하고 싶다면) 아래처럼 하면 된다.
[code]
<select>
<option value="선택값" selected="selected">메뉴</option>
<option value="선택값">메뉴</option>
</select>
[/code]
HTML에서 Select box 링크 걸기
그런데, 여기서 선택값이 들어가는 "value"가 여러모로 쓸모가 많다. 그래서 셀렉트 박스에 링크 걸기도 간단하게 처리할 수 있는 것이다.
일단 select 태그에 onchange 스크립트를 넣어주고, option의 value에 링크 URL를 적어 주자. (아래 코드와 위의 코드를 비교해 보면 확실히 이해가 빠를 것임)
[code]
<select onchange="window.open(value,'_self');">
<option selected="selected">선택하세요</option>
<option value="http://www.kiss7.kr/">키스세븐</option>
</select>
[/code]
위에서 onchange에 주는 스크립트는 "window.open(value,'_self');"이다.
여기서 window.open는 새창 명령이고, value는 그 아래의 option에 있는 링크URL이고, _self는 새창 방식이다. 그러니까 이것은 "옵션 중 value 링크를 가져와서 현재 창(self)에 띄우라는 명령인 것이다.
만약 새창으로 띄우고 싶다면 "_self"를 "_blank"로 바꾸면 된다.
CSS로 Select 박스 커스텀 디자인하기
그런데, Select box는 HTML을 적용하기 때문에 모양이 영 아니다. 그러므로 Select box에 커스텀 디자인을 입히려면 CSS파일에서 따로 코드를 줘야 한다.
HTML 파일에 셀렉트 박스 코드를 넣어주자. 단, 위의 태그와 비교해 보면 class라는 것이 더 생겼음을 알 수 있다.
[code]
<select class="first_select">
<option value="선택값">메뉴</option>
<option value="선택값">메뉴</option>
</select>
[/code]
이제 셀렉스 박스에 대한 CSS 스타일로 커스텀 디자인 코드를 넣어보자.
[code]
<style>
.first_select {
background-color:#ffcc00; width:200px; padding:10px; border:1px solid #999; border-radius:5px;
}
.first_select option {
background-color:#ffffff; color:#000000; font-size:0.9em;
}
</style>
[/code]
여기에서 .first_select는 셀렉트 박스에 대해 디자인을 커스텀하겠다는 것이다. (그냥 .select라고 해도 되지만, 다른 셀렉트 박스에 영향을 안 주기 위해 이렇게 썼다)
그 아래에 나오는 .first_select option는 Select box 안에 들어 있는 옵션에 대한 커스텀 디자인 부분이다. 여기서 보는 것처럼 배경과 글자색, 글자 크기 등을 다 조정할 수 있다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)
(참고: background-color(배경색), width(가로 너비), padding(내부 글자와의 간격), border(박스 선모양), border-radius(사각 모서리를 둥글게), color(글자 색), font-size(글자 크기)라는 것도 초보자라면 알아둬야 한다)
만약, 화살표를 바꾸고 싶다면 아래처럼 background: url('http://경로/이미지.jpg')를 추가한 후, CSS에서는 기존의 화살표 삭제 코드를 넣으면 된다. 아래처럼 말이다.
[code]
<style>
.first_select {
background: url('http://경로/이미지.jpg') no-repeat 95% 50%;
-webkit-appearance:none; -moz-appearance:none; appearance:none;
}
.first_select::-ms-expand { display:none; }
</style>
[/code]
여기서 webkit, ms-expand 등이 일부 문제가 되는 브라우저까지 화살표 이미지를 변경시키도록 하는 코드다.