Bootstrap์ด๋? ๋ฐ์ํ ์น์ ๋น ๋ฅด๊ณ ์ฝ๊ฒ ๋ง๋ค์ด์ฃผ๋ ํ๋ก ํธ์๋ ํ๋ ์์ํฌ.
๊ธฐ๋ณธ์ ์ธ html, css ์ฝ๋๋ฅผ ๋ค๋ฃฐ ์ค ์๋ค๋ฉด ๊ฐ๋จํ๊ฒ ๋ ์ด์์์ ์ก์ ์ ์๊ฒ ํด์ฃผ๋ ์์ฃผ ๊ฐํธํ ๋๊ตฌ์ด๋ค. ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ผ๋ฉด ์ด ํ๋ ์์ํฌ๋ฅผ ์ธ ์ผ์ด ์๊ฒ ์ง๋ง, ๋ค๋ฅธ ๋ถ์ผ์ ๊ฐ๋ฐ์๊ฐ ๊ฐ๋ณ๊ฒ ๋ทฐ๋ฅผ ์งค ์ผ์ด ์๊ธด๋ค๋ฉด ์ด ๋ถํธ์คํธ๋ฉ์ ์ฌ์ฉํ๋ ๊ฒ์ ์ถ์ฒํ๋ค ๐๐ป
์์ฑ๋ณธ์ ์ด๋ ๊ฒ ์๊ฒผ๊ณ , ์ฝ๋๋ฅผ ๋ฏ์ด ๋ณด์!
์ฐ์ ์ฝ๋๋ฅผ ์์ฑํ๊ธฐ ์ ์ ํด์ผํ ์ผ์ด ์๋ค.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">์ด ์ฝ๋๋ฅผ <head></head> ์ฌ์ด์ ์ถ๊ฐํด์ผ ๋ถํธ์คํธ๋ฉ์ด ์ฌ์ฉ ๊ฐ๋ฅํด์ง๋ค.
๊ฐ์ฅ ๋ฐ๊นฅ ํ๊ทธ๋ถํฐ ๋ฏ์ด๋ณด๊ฒ ๋ค. ์์ฑ ์ฝ๋๋ ๋งจ ์๋์ โฌ๏ธ
<div id="join" class="container-fluid"></div>div์ ํฌ๊ธฐ๋ ๋ฐ๋ก css๋ก ์กฐ์ ํด์ฃผ๊ธฐ ์ํด id๋ฅผ ์ฃผ์๊ณ ,
container-fluid๋ผ๋ ๋ถํธ์คํธ๋ฉ ํด๋์ค๋ฅผ ํ์ฉํ์ฌ viewport ์ ์ฒด ํญ์ ์ฐจ์งํ๋ ์ปจํ ์ด๋ ๋ฐ์ค๋ก ๊ฐ์ธ์ฃผ์๋ค.
๋ค์ ํ๊ทธ๋ค์ ์์๋ณด๊ธฐ ์ ์ ๋ถํธ์คํธ๋ฉ์๋ Grid๋ผ๋ ํ๋ฉด๋ถํ ์ ์ํด ์ ์๋ ๊ฒ์ด ์๋ค. ํ๋ฉด์ 12๊ฐ๋ก ์ชผ๊ฐฐ๋ค๊ณ ์์๋๋ฉด ๋๋ค.
์ ๋ชฉ
<div class="row mb-4 text-center">
<h3>ํ์๊ฐ์
</h3>
</div>mb -> margin bottom ์ด๋ ๋ป์ผ๋ก ๊ณต๋ฐฑ์ ์ฃผ๋ ๊ฒ์ด๋ค. https://velog.io/@leyuri/Bootstrap-%EA%B3%B5%EB%B0%B1Spacing-%EC%A3%BC%EB%8A%94-%EB%B2%95-mt-mb-ml-mr-mx-my-pt-pb-pl-pr-px-py ์ด ๋ธ๋ก๊ทธ์ ๋ถํธ์คํธ๋ฉ์ผ๋ก ๊ณต๋ฐฑ ์ฃผ๋ ๋ฒ์ด ์์ธํ ์ ๋ฆฌ๋์ด ์๋ค.
๊ทธ๋ฆฌ๊ณ text-center๋ก ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ํด์ค๋ค.
์ ๋ ฅ
<div class="row mb-2 text-center">
<div class="col-3">์ด๋ฆ</div>
<div class="col"><input type="text" class="form-control" id="userinfo-name"></div>
</div>col-3 ์ด๋ฐ ์์ผ๋ก ๊ทธ๋ฆฌ๋๋ฅผ ์ธ ์ ์๋ค. 12๊ฐ ๋ถํ ์ค์ 3๊ฐ์ ๊ณต๊ฐ๋ง ์ด๋ค๋ ๋ป!
์ ๋ ฅ - ์ด๋ฉ์ผ
<div class="row mb-2 text-center">
<div class="col-3">์ด๋ฉ์ผ</div>
<div class="col-4"><input type="text" class="form-control" id="userinfo-email"></div>
<div class="col-2"><span class="input-group-text">@</span></div>
<div class="col-3">
<select class="custom-select custom-select-lg" id="userinfo-selectdomain">
<option value="">๋๋ฉ์ธ ์ ํ</option>
<option value="google.com">GOOGLE</option>
<option value="kakao.com">KAKAO</option>
<option value="naver.com">NAVER</option>
</select>
</div>
</div>์ด๋ฐ ์์ผ๋ก col์ ์ชผ๊ฐ์ ์ฌ์ฉํ ์ ์๋ค. ์ ๋ฐํ๊ฒ ์กฐ์ ํ๊ณ ์ถ๋ค๋ฉด css๋ฅผ ๊ฑด๋๋ ค์ผ ํ๋ค ๐ฅฒ
๋ฒํผ
<div id="edit-footer" class="container-fluid text-center">
<button type="button" class="btn btn-primary" id="edit-button">์์ </button>
<button type="button" class="btn btn-dark" id="edit-button">์ทจ์</button>
</div>btn์ด๋ผ๋ ํด๋์ค๋ฅผ ์ฃผ๋ฉด ๋๊ณ , btn-primary, btn-dark์ ๊ฐ์ด ๋ฒํผ์ ์ฉ๋์ ์๊น์ด ์ ํด์ ธ์๋ ์์ฑ๋ ์๋ค.
์์ฑ ์ฝ๋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<style>
h3 {
padding-top: 200px;
}
#join {
max-width: 700px;
}
#userinfo-selectdomain {
width: 150px;
}
</style>
<title>Join</title>
</head>
<body>
<div id="join" class="container-fluid">
<div class="row mb-4 text-center">
<h3>ํ์๊ฐ์
</h3>
</div>
<div class="row mb-2 text-center">
<div class="col-3">์ด๋ฆ</div>
<div class="col"><input type="text" class="form-control" id="userinfo-name"></div>
</div>
<div class="row mb-2 text-center">
<div class="col-3">์์ด๋</div>
<div class="col"><input type="text" class="form-control" id="userinfo-id">
</div>
</div>
<div class="row mb-2 text-center">
<div class="col-3">๋น๋ฐ๋ฒํธ</div>
<div class="col"><input type="password" placeholder="๋น๋ฐ๋ฒํธ" class="form-control" id="userinfo-password">
</div>
</div>
<div class="row mb-2 text-center">
<div class="col-3">๋น๋ฐ๋ฒํธํ์ธ</div>
<div class="col"><input type="password" placeholder="๋น๋ฐ๋ฒํธํ์ธ" class="form-control" id="userinfo-repassword">
</div>
</div>
<div class="row mb-2 text-center">
<div class="col-3">์ด๋ฉ์ผ</div>
<div class="col-4"><input type="text" class="form-control" id="userinfo-email">
</div>
<div class="col-2"><span class="input-group-text">@</span>
</div>
<div class="col-3">
<select class="custom-select custom-select-lg" id="userinfo-selectdomain">
<option value="">๋๋ฉ์ธ ์ ํ</option>
<option value="google.com">GOOGLE</option>
<option value="kakao.com">KAKAO</option>
<option value="naver.com">NAVER</option>
</select>
</div>
</div>
<div id="edit-footer" class="container-fluid text-center">
<button type="button" class="btn btn-primary" id="edit-button">์์ </button>
<button type="button" class="btn btn-dark" id="edit-button">์ทจ์</button>
</div>
</div>
</body>
</html>