2025-01-30T01:41:18

2025-01-30 01:41:18 +09:00
parent 75cf69e82f
commit e7ee682f16
13 changed files with 908 additions and 0 deletions
--- a/docs/03_박스
+++ b/docs/03_박스
@@ -0,0 +1,162 @@
+# Box Model
+
+웹페이지의 모든 요소는 박스(Box) 형태로 표시돼.
+이 박스를 구성하는 요소들을 **박스 모델(Box Model)**이라고 해.
+HTML 요소가 실제로 화면에서 차지하는 크기를 결정하는 가장 중요한 개념이야.
+
+## 박스 모델의 4가지 영역
+CSS 박스 모델은 4개의 영역으로 구성돼.
+```css
+┌────────────────────────────────────┐
+│          Margin                    │
+│  ┌──────────────────────────────┐  │
+│  │       Border                 │  │
+│  │  ┌────────────────────────┐  │  │
+│  │  │   Padding              │  │  │
+│  │  │  ┌──────────────────┐  │  │  │
+│  │  │  │   Content        │  │  │  │
+│  │  │  └──────────────────┘  │  │  │
+│  │  └────────────────────────┘  │  │
+│  └──────────────────────────────┘  │
+└────────────────────────────────────┘
+```
+1. Content (내용 영역)
+
+    * 요소의 **실제 내용(텍스트, 이미지 등)**이 들어가는 공간.
+    * width, height 속성으로 크기 조절 가능.
+
+2. Padding (안쪽 여백)
+
+    * 내용과 테두리(Border) 사이의 여백.
+    * 요소의 내부 여백을 조절하는 역할.
+    * padding 속성 사용
+
+3. Border (테두리)
+    * 요소를 감싸는 경계선.
+    * border 속성 사용
+
+4. Margin (바깥 여백)
+    * 요소와 다른 요소 사이의 거리를 조정하는 여백.
+    * margin 속성 사용
+
+## 박스 모델 속성
+
+* width / height
+
+    width와 height는 content 영역만 조절하고, padding, border, margin은 포함하지 않아!
+    ```css
+    div {
+        width: 300px;
+        height: 150px;
+    }
+    ```
+
+* padding
+
+    ```css
+    div {
+    padding: 10px; /* 모든 방향 */
+    padding: 10px 20px; /* 위아래 10px, 좌우 20px */
+    padding: 10px 15px 20px 25px; /* 시계 방향 (위, 오른쪽, 아래, 왼쪽) */
+    }
+    ```
+
+* border
+    - solid : 실선
+    - dashed : 점선
+    - dotted : 점
+    - double : 이중선
+    - none : 없음
+    ```css
+    div {
+        border: 3px solid red; /* 두께 3px, 실선, 빨간색 */
+        border-radius: 10px; /* 모서리를 둥글게 */
+    }
+    ```
+
+* margin
+
+    ```css
+    div {
+        margin: 20px; /* 모든 방향 */
+        margin: 10px auto; /* 위아래 10px, 좌우 자동 정렬 */
+    }
+    ```
+    auto를 사용하면 가운데 정렬 가능!
+    ```css
+    div {
+        width: 300px;
+        margin: 0 auto;
+    }
+    ```
+
+## box-sizing
+
+기본적으로 width와 height는 content 영역만 포함하지만,
+`box-sizing: border-box;`를 사용하면 border와 padding까지 포함한 크기로 계산돼.
+
+```css
+div {
+  width: 200px;
+  height: 100px;
+  padding: 20px;
+  border: 5px solid black;
+  box-sizing: border-box;
+}
+```
+요소의 실제 크기를 더 쉽게 관리할 수 있어!
+
+## max-width / max-height
+max-width 속성은 요소가 가질 수 있는 최대 너비를 제한하는 역할을 해. 콘텐츠가 너무 커지지 않도록 조절할 때 사용돼.
+
+max-height 속성은 요소의 최대 높이를 제한하는 역할을 해.
+max-width와 같은 원리로 콘텐츠가 너무 높아지는 걸 방지할 때 사용돼.
+
+* none :	(기본값) 최대 너비/높이 제한 없음
+* px, %, em, rem :	특정 단위로 최대 너비/높이 설정
+
+```css
+.box {
+  width: 100%;
+  max-width: 600px;
+  background-color: lightblue;
+}
+/* width: 100%이지만 최대 600px까지만 확장됨 (화면이 작으면 줄어들고, 커지면 600px에서 멈춤) */
+```
+```css
+img {
+  max-width: 100%;
+  height: auto;
+}
+/* 반응형 이미지: 이미지가 부모 요소보다 커지지 않도록 제한 (화면 크기에 맞춰 자동 조정됨) */
+```
+```css
+.content {
+  max-height: 300px;
+  overflow: auto;
+}
+/* 콘텐츠가 너무 많으면 스크롤이 자동 생성됨 */
+```
+
+## border-radius
+border-radius 속성은 요소의 모서리를 둥글게 만들어주는 역할을 해.
+네모난 요소를 부드러운 디자인으로 바꿀 때 필수!
+* 0 :	(기본값) 직각 모서리
+* px, % :	반경을 설정하여 둥근 정도 조절
+* 50% :	원형으로 만듦
+```css
+.box {
+  width: 150px;
+  height: 150px;
+  background-color: steelblue;
+  border-radius: 20px;
+} /* 20px만큼 모서리가 둥글게 처리됨 */
+```
+```css
+.circle {
+  width: 100px;
+  height: 100px;
+  background-color: tomato;
+  border-radius: 50%;
+} /* 정사각형을 완벽한 원으로 변환 */
+```