Frontend

day04_box

AIHYEONJI 2025. 4. 4. 12:43

1. 박스 모델(box model)
- 박스모델은 HTML요소가 웹 페이지에 표시될 떄의 기본적인 크기와 여백 구조를 설명하는 개념, 웹 레이아웃 구성 시 중요

- 하나의 요소는 콘텐츠 영역을 중심으로, 
    그 바깥에 패딩 -> 테두리-> 마진 => 요소의 실제 화면상 크기


2. 패딩(Padding)
- 패딩은 CSS에서 요소의 콘텐츠와 테두리 사이의 안쪽 여백 설정
 즉, 텍스트나 이미지 같은 콘텐츠와 경계선 사이의 내부 공간을 확보

- Padding 위 오른쪽 아래 왼쪽 ; 만약 하나의 값만 주면 모든 방향으로 동일하게 적용

- 패딩과 마진과는 다르게 요소의 배경색이나 배경 이미지가 함께 확장, 콘텐츠 내부의 여유 공간 확보에 필수적임

3. 테두리(border)
- CSS에서 HTML의 테두리를 설정하는 속성
- 선의 두께, 종류, 색상
- padding < border < margin
# 주의!
- border-style 없이 border-width나 border-color만 설정하면      
    테두리 표시 X, 따라사 border-style 필수임

4. 마진(margin)
- CSS에서 요소의 바깥 여백(외부 간격)을 설정하는 속성
    요소와 오소 사이의 간격을 조절
    - 패딩 : 안쪽 여백
    - 마진 : 요소 간 간격

- 인접한 요소 사이의 세로 마진이 겹치는 마진 병합이 일어날 수 있음.
- margin : auto = 브라우저가 자동 계산해서 설정
    단, 요소의 width가 지정되어있어야함.

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Box model</title>
    <style>
      * {
        box-sizing: border-box;
      }
      body {
        background-color: #f0f0f0;
        padding: 40px;
      }
      .container {
        width: 600px;
        margin: 0 auto;
      }
      .box {
        background-color: white;
        padding: 20px;
        margin: 30px 0;
      }

      .box1 {
        border: 2px dotted #4caf50;
      }
      .box2 {
        border: 2px dashed #4caf50;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box box1">첫 번째 박스</div>
      <div class="box box2">두 번째 박스</div>
    </div>
  </body>
</html>