★ 레이아웃:
1. container로 시작
2. 그 다음 row로 시작
3. 항상 row -> column -> row ... 로 짜기
(row안에 row / col안에 col 금지!)
4. 컨텐츠는 무.조.건. col에 넣기!!!
5. 한개의 row는 12등분이라고 생각하기(not 100%)
<!-- boot strap -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<div class=" container">
<div class="row">
<!-- class명-N : N만큼 가져가겠다 -->
<div class="col-6">c</div>
<div class="col-2">c</div>
<!-- <div>이건?</div> -->
<div class="col-1">
<div class="row">rr</div>
<div class="col">c2</div>
<div class="col">c2</div>
<div class="row">rr</div>
<div class="row">rr</div>
</div>
<div class="col-2">c</div>
</div>
<div class="row row-cols-3">
<!-- row row-클래스명s-N : 그 클래스 애들을 N등분하겠다-->
<div class="col">b</div>
<div class="col">b</div>
<div class="col">bb</div>
<div class="col">bb</div>
</div>
<div class="row">
</div>
<div class="row">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>c
c
rr
c2
c2
rr
rr
c
b
b
bb
bb
'HTML > DAY 30 _ 23.10.05' 카테고리의 다른 글
| 게시판 만들기 (1) | 2023.10.11 |
|---|---|
| Login page Basic (0) | 2023.10.11 |