250131(3교시 복습)

CSS Box Model 및 Bootstrap 5 관련 정리

📌 1. CSS Box Model 개념

Box Model은 HTML 요소가 브라우저에서 박스로 인식되는 방식을 설명하는 모델입니다.

✔ Box Model 구성 요소

1. Content (내용)

   • 요소의 실제 내용이 들어가는 공간 (텍스트, 이미지 등)

2. Padding (안쪽 여백)

   • content와 border 사이의 여백
   • padding: top right bottom left; 순서로 지정

3. Border (테두리)

   • 요소를 감싸는 외곽선

4. Margin (바깥 여백)

   • border 바깥쪽의 여백
   • margin: top right bottom left; 순서로 지정

---

📌 2. Border 속성 종류

border: 50px dashed red;   /* 점선 */
border: 50px dotted red;   /* 둥근 점선 */
border: 50px solid red;    /* 실선 */
border: 50px double red;   /* 이중선 */
border: 50px groove red;   /* 입체적인 홈 효과 */
border: 50px ridge red;    /* 돌출된 테두리 */
border: 50px inset red;    /* 안으로 들어간 효과 */
border: 50px outset red;   /* 바깥으로 나온 효과 */

👉 요소를 박스로 인식함.

---

📌 3. Bootstrap 5의 기본 스타일

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

• Bootstrap 5의 JavaScript 기능을 기본값으로 제공하는 코드
• 버튼, 모달, 드롭다운 등 동적 기능을 자동으로 활성화함

---

📌 4. <input>과 input-group

✔ <input> 태그

• 사용자 입력을 받을 수 있는 요소
• 다양한 type 속성을 가질 수 있음 (text, password, email, number 등)

✔ input-group이란?

• Bootstrap에서 제공하는 클래스 (임의의 이름이 아님)
• 입력 필드와 버튼 등을 묶어주는 역할

  <div class="input-group">
    <input type="text" class="form-control" placeholder="사용자 입력">
    <button class="btn btn-primary">확인</button>
  </div>

---

📌 5. #buttonset의 margin 설정

#buttonset { margin-top: 15px; }

• #buttonset이라는 ID를 가진 요소의 상단 여백을 15px로 지정

<div id="buttonset" class="input-group">
    <button type="submit" class="btn btn-primary">가입</button>
    &nbsp;&nbsp;&nbsp;
    <button type="reset" class="btn btn-primary">초기화</button>
</div>

• class="input-group"을 사용해 버튼을 그룹으로 묶음
•   (공백)으로 버튼 간 간격 조정

---

📌 6. Bootstrap 5 테이블 스타일

👉 참고 링크:
Bootstrap 5 Tables (W3Schools)

✔ Bootstrap 5 테이블 종류

테이블 종류	설명
Basic Table	기본 테이블
Striped Rows	줄무늬 있는 테이블 (table-striped)
Bordered Table	테두리가 있는 테이블 (table-bordered)
Hover Rows	마우스를 올리면 강조 (table-hover)

✔ 테이블 예제

<table class="table table-striped">
    <thead>
        <tr>
            <th>이름</th>
            <th>나이</th>
            <th>직업</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>김철수</td>
            <td>30</td>
            <td>개발자</td>
        </tr>
        <tr>
            <td>이영희</td>
            <td>28</td>
            <td>디자이너</td>
        </tr>
    </tbody>
</table>

📌 추가 옵션

• table-hover → 마우스를 올리면 강조됨
• table-bordered → 모든 셀에 테두리 추가

---

📌 최종 요약

1. CSS Box Model

   • 요소는 content, padding, border, margin으로 구성됨
   • padding과 margin은 top, right, bottom, left 순서로 지정

2. Border 스타일

   • solid, dashed, dotted, double, groove, ridge, inset, outset 등이 있음

3. Bootstrap 기본 제공 스타일

   • bootstrap.bundle.min.js를 포함하면 JavaScript 기능이 자동 활성화됨

4. input-group

   • Bootstrap에서 제공하는 클래스로, 입력 필드와 버튼을 그룹화하는 역할

5. Bootstrap 5 테이블

   • table-striped, table-bordered, table-hover 등 다양한 스타일 제공

👉 Bootstrap을 활용하면 스타일을 쉽게 적용할 수 있음! 🚀