2024-06-21

Writerside/topics/Box-Model.md

@@ -4,12 +4,12 @@
 인라인 요소는 새로운 줄에서 시작하지 않으며, `width`, `height` 속성은 무시됩니다. `<a>`, `<em>`, `<strong>`, `<span>` 등은 기본적으로 인라인 요소입니다.
 
 박스의 유형은 `display` 속성을 통해서 정의할 수 있습니다.
-
-* block
-* inline
-* inline-block
-* flex
-* inline-flex
+* display
+  * block
+  * inline
+  * inline-block
+  * flex
+  * inline-flex
 
 ## 박스 모델
 
@@ -28,6 +28,7 @@
 
 ### 보더 박스 모델
 
+* `box-sizing` : content-box | border-box
 `width`와 `height` 속성이 컨텐트 영역의 크기를 지정하는 대신, 보더 영역의 크기를 지정하도록 합니다.
 
 ```CSS
@@ -53,7 +54,7 @@ html {
 * `border`
 * `border-top`, `border-right`, `border-bottom`, `border-left`
 * `border-width`
-* `border-style`
+* `border-style` : none | hidden | dotted | dashed | solid | double | groove | rigid | inset | outset
 * `border-color`
 * `border-top-width`, `border-top-style`, `border-top-color`
 * `border-right-width`, `border-right-style`, `border-right-color`
@@ -87,6 +88,11 @@ html {
 
 * `box-shadow`
 
+## 아웃라인
+
+* `outline`
+* `outline-color`, `outline-offset`, `outline-style`, `outline-width`
+
 ## Overflow
 
 `overflow` 의 기본값은 visible 이므로, overflows 가 발생하면 기본적으로 콘텐츠를 볼 수 있습니다. 콘텐츠가 넘칠 때 내용을 자르려면 박스에 `overflow: hidden` 을 설정할 수 있습니다.