2025-02-03T13:25:31

2025-02-03 13:25:31 +09:00
parent e7ee682f16
commit 7936270d10
21 changed files with 1896 additions and 98 deletions
--- a/docs/03_박스
+++ b/docs/03_박스
@@ -12,7 +12,7 @@ CSS 박스 모델은 4개의 영역으로 구성돼.
 │  ┌──────────────────────────────┐  │
 │  │       Border                 │  │
 │  │  ┌────────────────────────┐  │  │
-│  │  │   Padding              │  │  │
+│  │  │    Padding             │  │  │
 │  │  │  ┌──────────────────┐  │  │  │
 │  │  │  │   Content        │  │  │  │
 │  │  │  └──────────────────┘  │  │  │
@@ -20,6 +20,7 @@ CSS 박스 모델은 4개의 영역으로 구성돼.
 │  └──────────────────────────────┘  │
 └────────────────────────────────────┘
 ```
+
 1. Content (내용 영역)

    * 요소의 **실제 내용(텍스트, 이미지 등)**이 들어가는 공간.
@@ -41,59 +42,83 @@ CSS 박스 모델은 4개의 영역으로 구성돼.

 ## 박스 모델 속성

-* width / height
+| 속성 | 설명 | 옵션 |
+|---|---|---|
+| width / height | 요소의 크기 설정 | auto |
+| padding | 요소의 안쪽 여백 설정 | auto, inherit |
+| border | 테두리 두께, 스타일, 색상 설정 | solid, dashed, dotted , double, none |
+| margin | 바깥쪽 여백 설정 | auto |
+| box-sizing | 요소 크기 계산 방식 결정 | content-box, border-box |
+| max-width / max-height | 요소의 최대 크기 지정 | none, inherit |
+| min-width / min-height | 요소의 최소 크기 지정 | none, inherit |
+| border-radius | 요소의 모서리를 둥글게 만듦 | |
+| box-shadow | 요소의 그림자 효과 설정 | |
+| outline | 요소의 외곽선 | |

-    width와 height는 content 영역만 조절하고, padding, border, margin은 포함하지 않아!
-    ```css
-    div {
-        width: 300px;
-        height: 150px;
-    }
-    ```
+### width / height

-* padding
+width와 height는 content 영역만 조절하고, padding, border, margin은 포함하지 않아!
+```css
+div {
+  width: 300px;
+  height: 150px;
+}
+```

-    ```css
-    div {
-    padding: 10px; /* 모든 방향 */
-    padding: 10px 20px; /* 위아래 10px, 좌우 20px */
-    padding: 10px 15px 20px 25px; /* 시계 방향 (위, 오른쪽, 아래, 왼쪽) */
-    }
-    ```
+### padding

-* border
-    - solid : 실선
-    - dashed : 점선
-    - dotted : 점
-    - double : 이중선
-    - none : 없음
-    ```css
-    div {
-        border: 3px solid red; /* 두께 3px, 실선, 빨간색 */
-        border-radius: 10px; /* 모서리를 둥글게 */
-    }
-    ```
+```css
+div {
+  padding: 10px; /* 모든 방향 */
+  padding: 10px 20px; /* 위아래 10px, 좌우 20px */
+  padding: 10px 15px 20px 25px; /* 시계 방향 (위, 오른쪽, 아래, 왼쪽) */
+}
+```
+#### padding-top / padding-right / padding-bottom / padding-left

-* margin
+### border
+- solid : 실선
+- dashed : 점선
+- dotted : 점
+- double : 이중선
+- none : 없음
+```css
+div {
+    border: 3px solid red; /* 두께 3px, 실선, 빨간색 */
+    border-radius: 10px; /* 모서리를 둥글게 */
+}
+```

-    ```css
-    div {
-        margin: 20px; /* 모든 방향 */
-        margin: 10px auto; /* 위아래 10px, 좌우 자동 정렬 */
-    }
-    ```
-    auto를 사용하면 가운데 정렬 가능!
-    ```css
-    div {
-        width: 300px;
-        margin: 0 auto;
-    }
-    ```
+#### border-top / border-right / border-bottom / border-left
+
+#### border-color / border-style / border-width
+
+### margin
+
+```css
+div {
+    margin: 20px; /* 모든 방향 */
+    margin: 10px auto; /* 위아래 10px, 좌우 자동 정렬 */
+}
+```
+> auto를 사용하면 가운데 정렬 가능!
+```css
+div {
+    width: 300px;
+    margin: 0 auto;
+}
+```
+#### margin-top / margin-right / margin-bottom / margin-left
+
+#### Margin Collapsing
+
+여백이 서로 맞닿은 두 개의 요소가 있으면 해당 여백은 합쳐져 하나의 여백이 되어서, 그 중 가장 큰 여백의 크기가 됩니다.

 ## box-sizing

 기본적으로 width와 height는 content 영역만 포함하지만,
 `box-sizing: border-box;`를 사용하면 border와 padding까지 포함한 크기로 계산돼.
+* content-box, border-box

 ```css
 div {
@@ -137,6 +162,7 @@ img {
 }
 /* 콘텐츠가 너무 많으면 스크롤이 자동 생성됨 */
 ```
+## min-width / min-height

 ## border-radius
 border-radius 속성은 요소의 모서리를 둥글게 만들어주는 역할을 해.
@@ -144,6 +170,7 @@ border-radius 속성은 요소의 모서리를 둥글게 만들어주는 역할
 * 0 :	(기본값) 직각 모서리
 * px, % :	반경을 설정하여 둥근 정도 조절
 * 50% :	원형으로 만듦
+
 ```css
 .box {
  width: 150px;
@@ -160,3 +187,60 @@ border-radius 속성은 요소의 모서리를 둥글게 만들어주는 역할
  border-radius: 50%;
 } /* 정사각형을 완벽한 원으로 변환 */
 ```
+
+## box-shadow
+box-shadow 속성은 요소에 그림자 효과를 추가하는 속성이야.
+```css
+box-shadow: [x-offset] [y-offset] [blur-radius] [spread-radius] [color] [inset];
+```
+* x-offset :	그림자의 가로 위치 (양수 = 오른쪽, 음수 = 왼쪽)
+* y-offset :	그림자의 세로 위치 (양수 = 아래쪽, 음수 = 위쪽)
+* blur-radius :	그림자의 흐림 정도 (값이 클수록 부드럽게 퍼짐)
+* spread-radius :	그림자의 확장 범위 (양수 = 확대, 음수 = 축소)
+* color :	그림자의 색상
+* inset :	그림자가 요소 내부로 들어감 (옵션)
+```css
+.box {
+  box-shadow: 5px 5px 10px gray;
+}
+```
+### 내부 그림자
+```css
+.box {
+  box-shadow: inset 5px 5px 10px gray;
+}
+```
+### 여러 개의 그림자 추가
+```css
+.box {
+  box-shadow: 3px 3px 5px gray, -3px -3px 5px lightgray;
+}
+```
+### 입체감 있는 버튼
+```css
+.button {
+  background: royalblue;
+  color: white;
+  padding: 10px 20px;
+  border-radius: 5px;
+  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
+}
+.button:active {
+  box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.3);
+}
+```
+
+## outline
+outline 속성은 요소의 테두리(윤곽선)를 강조하는 데 사용돼. border와 비슷하지만, 요소의 크기에 영향을 주지 않으며, 바깥쪽에 별도의 선을 추가하는 효과가 있어!
+* border와 다르게 요소의 크기에 영향을 주지 않음
+* 보통 포커스된 입력 필드나 접근성(Accessibility) 개선을 위해 사용됨
+```css
+.box {
+  outline: 3px solid green;
+  outline-offset: 5px;
+}
+```
+### outline-width / outline-style / outline-color / outline-offset
+outline은 기본적으로 요소 바로 바깥쪽에 위치하지만, outline-offset을 사용하면 윤곽선과 요소 사이의 간격을 조절할 수 있어.
+
+