안녕하세요. 부트스트랩을 이용하여 selectbox를 쉽게 만들어 보겠습니다.
* 결과
* 준비
https://stickode.tistory.com/821
참고해서 부트스트랩을 사용할 수 있게 해주세요
* 코드
<select id="selectbox" name="selectbox" onchange=""
class="form-select pt-1 mt-4" style="height: 33px;width:40%; vertical-align: middle;">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
</select>
select 태그의 class = "form-select"값을 주었습니다.
셀렉박스의 윗 공간에 여백을 주기 위해 mt-4 속성값을 주었습니다. mt는 margin top에 해당됩니다.
* 전체 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=s, initial-scale=1.0">
<title></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
</head>
<body>
<div class="container">
<select id="selectbox" name="selectbox" onchange=""
class="form-select pt-1 mt-4" style="height: 33px;width:40%; vertical-align: middle;">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
</select>
</div>
</body>
* 기타 속성
글자 크기, 비활성화도 설정가능하니 공식사이트를 참고하여 적용하시길 바랍니다.
https://getbootstrap.com/docs/5.3/forms/select/#default
Select
Customize the native <select>s with custom CSS that changes the element’s initial appearance.
getbootstrap.com
여기까지 읽어주셔서 감사합니다.
'HTML／CSS' 카테고리의 다른 글
| [HTML/CSS]스켈레톤 UI: 로딩 애니메이션 (0) | 2023.10.27 |
|---|---|
| [HTML/CSS] Tailwind 사용해서 indications 있는 input 폼 만들기 (0) | 2023.08.29 |
| [HTML/CSS] table contenteditable 속성 사용하기 (0) | 2023.06.24 |
| [HTML/CSS] bootstrap Grid, border (0) | 2023.06.12 |
| [HTML/CSS] bootstrap 레이아웃 중앙에 배치하기 (0) | 2023.06.01 |
