목차
[Bootstrap]HTML 버튼(button) 오른쪽 정렬
HTML 문서를 작성하면 버튼(Button), 라벨(Label), 입력창(Input)을 마음대로 배치하고 싶은데, 생각한 위치로 가지가 않는 경우가 많습니다.
가령 오른쪽으로 정렬할 경우 버튼을 오른쪽 끝에 붙여서 아래로 하나 둘씩 배치하고 싶은데 일반적인 방법이 css의 float를 사용하는 방법인데
코드>>
<button type="login" class="btn btn-primary" style="float:right;">로그인</button>
<button type="login" class="btn btn-warning" style="float:right;">로그인</button>
이 경우 아래 그림 처럼 아래 위가 아닌 오른쪽에 붙어서 배치가 됩니다.
결과>>
코드 라인1 : bootstrap button class 를 사용해서 버튼을 만들고 style을 이용해서 float로 오른쪽에 배치하였습니다. 이방법이 인터넷에 일반적으로 오른쪽 정렬 방법으로 올라와 있습니다.
[Bootstrap]HTML 라벨(Label), 입력(Input) 오른쪽 상하 정렬
이번에는 입력창과 라벨을 오른쪽에 배치하면서 아이디 입력 부분은 위쪽에 비밀번호 입력창을 아래에 배치해 보겠습니다.
여기서 필요한 Class(클래스)가 부트스트랩의 그리드(Grid)와 컨테이너(Container)입니다.
각 내용에 대한 포스트는 링크로 걸어 놓았으니 상세 내용을 알고 싶으시면 위에 link를 클릭 하셔서 확인하시면 됩니다.
코드-head 선언부분>>
<!DOCTYPE html>
<html lang="en">
<head>
<title>https://scribblinganything.tistory.com/</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
input {
margin: 1px;
}
button {
margin: 1px;
}
</style>
</head>
<body>
7~8번 라인 : Bootstrap 사용을 위해 웹에서 Bootstrap을 불러 옵니다.
9~16번 라인 : input, button에 margin 값을 줘서 간격이 딱 붙지 않고 여유 있게 보이게 만들었습니다.
코드-body 부분>>
<body>
<div class="container">
<form>
<div class="row">
<div class="col-sm-9">
</div>
<div class="form-floating col-sm-3">
<input type="text" class="form-control " id="id" placeholder=".." name="id">
<label for="아이디">아이디</label>
</div>
</div>
<div class="row">
<div class="col-sm-9">
</div>
<div class="form-floating col-sm-3">
<input type="text" class="form-control col-sm-3" id="pwd" placeholder=".." name="pwd">
<label for="pwd">비밀번호</label>
</div>
</div>
<button type="submit" class="btn btn-warning" style="float:right;" id="logout">로그아웃</button>
<button type="submit" class="btn btn-primary" style="float:right;" id="login">로그인</button>
</form>
</div>
3번 라인: Container를 사용해서 전체 페이지를 사용하지 않고 가운데를 깔끔하게 사용합니다. 윈도우 사이즈 변동에 맞춰서 같이 움직이게 만들었습니다.
5번 라인: Grid에서 첫번째 행(row)에 대한 정의를 하였습니다.
6~7번 라인: Grid 시스템에서 열(Column)은 총 12개로 구성되어 있습니다. 9개의 칸을 빈칸으로 넣기 위해 넣었습니다.
8번 라인: 1행에서 나머지 3개 3을 아이디 입력창으로 사용합니다.
13번 라인: 두번째 행(row)을 정의하였습니다.
결과>>
주석>>
Grid와 Container를 사용하면 사용자가 원하는 위치에 자유롭게 배치할 수 있습니다. 그리고 윈도우 사이즈가 변하여도 거기에 맞춰서 배치해주기 때문에 신경쓸 부분이 적어집니다.
'웹관련프로그래밍(web programming) > Bootstrap(부트스트랩)' 카테고리의 다른 글
| [Bootstrap] HTML에 댓글창 추가하기 (0) | 2021.12.05 |
|---|---|
| [Bootstrap] Templates 무료 예제로 Flask와 연동하기 (2) | 2021.12.03 |
| HTML - Bootstrap 사용해서 공간(레이아웃) 배치하기 (Grid) (0) | 2021.10.13 |
| HTML - Bootstrap 사용해서 공간(레이아웃) 배치하기 (Container) (0) | 2021.10.11 |
| Bootstrap 팝업창(modal, dialog box) 만들기 (크기 조절) (0) | 2021.10.09 |