2024-06-21

Writerside/topics/Box-Model.md

@@ -4,12 +4,12 @@
 인라인 요소는 새로운 줄에서 시작하지 않으며, `width`, `height` 속성은 무시됩니다. `<a>`, `<em>`, `<strong>`, `<span>` 등은 기본적으로 인라인 요소입니다.
 
 박스의 유형은 `display` 속성을 통해서 정의할 수 있습니다.
-
+* display
-* block
+  * block
-* inline
+  * inline
-* inline-block
+  * inline-block
-* flex
+  * flex
-* inline-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` 을 설정할 수 있습니다.

Writerside/topics/Grid.md

@@ -8,6 +8,11 @@
 
 컨테이너 요소의 `display: grid`를 지정하면 직계 자식 요소는 모두 그리드 아이템이 됩니다.
 
+```CSS
+.container {
+    display: grid;
+}
+```
 
 ## 그리드 컨테이너
 

Writerside/topics/Selectors.md

@@ -10,7 +10,7 @@ p {
 }
 ```
 
-## 범용 선택자
+## 전체 선택자
 
 모든 항목을 선택합니다.
 
@@ -39,6 +39,16 @@ p {
 
 ## 속성 선택자
 
+```CSS
+a[href] {/* 지정된 속성을 갖는 모든 요소를 선택 */}
+a[attribute="value"] {/* 지정된 값과 속성의 값이 일치하는 모든 요소 */}
+a[attribute~="value"] {/* 지정된 값이 공백으로 분리된 목록에 포함 */}
+a[attribute|="value"] {/* 지정된 값과 일치하거나 하이픈으로 이어지는 요소 */}
+a[attribute^="value"] {/* 지정된 값으로 시작하는 요소 */}
+a[attribute$="value"] {/* 지정된 값으로 끝나는 요소 */}
+a[attribute*="value"] {/* 지정된 값이 문자열에 포함 */}
+```
+
 ### 속성 이름 선택자
 
 해당 속성이 있는 항목을 선택합니다.
@@ -114,16 +124,18 @@ div[class*="box-"] {
 * :focus
 
 * :required
-* :valid
+* :valid, :invalid
-* :invalid
 * :checked
-* :disabled
+* :disabled, :enabled
-* :enabled
 
 * :is()
 * :has()
 * :not()
 
+* :root
+
+* :playing, :paused
+
 ## 의사 요소 선택자
 
 의사 요소는 유사한 방식으로 동작하지만, 기존 요소에 클래스를 적용하는 것이 아니라 완전히 새로운 HTML 요소를 마크업에 추가한 것처럼 작동합니다.
@@ -134,11 +146,23 @@ div[class*="box-"] {
 * ::first-letter
 * ::selection
 
+* ::grammar-error, ::spelling-error
+
 ## 결합자
 
 다른 결합자를 서로 연결하여 새로운 일치 조건을 만듭니다.
 
-### 후손 결합자
+
+### 그룹 
+
+콤마로 구분된 선택자 각각을 모두 선택합니다.
+
+```CSS
+article, p {
+}
+```
+
+### 자손 결합자
 
 첫 번째 선택자와 일치하는 요소의 자손 중에서 하위 선택자와 일치하는 요소를 선택합니다.
 

Writerside/topics/Styling-Form.md

@@ -1,6 +1,10 @@
 # Styling Form
 
+
 https://developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms
 https://developer.mozilla.org/en-US/docs/Learn/Forms/Advanced_form_styling
 
 * `appearance` : none | auto | 
+
+
+* `cursor`

Writerside/topics/Styling-Table.md

@@ -1,3 +1,6 @@
 # Styling Table
 
-Start typing here...
+* table-layout
+* border-collapse
+* caption-side : top | bottom
+

Writerside/topics/Styling-Text.md

@@ -11,9 +11,10 @@
 * `font-style` : normal | italic | oblique
 * `font-weight` : normal | bold | lighter | bolder | 100~900
 * `text-transform` : none | uppercase | lowercase | capitalize | full-width
-* `text-decoration` : none | underline | overline | line-through
+* `text-decoration` : 값을 여러 개 중복해서 지정해도 됩니다.
+  * none | underline | overline | line-through
 * `text-decoration-line`, `text-decoration-style`, `text-decoration-color`
-* `text-shadow` : 그림자의 수평 오프셋, 수직 오프셋, 흐림 반경, 색상. 쉼표로 구분된 여러 그림자 값을 포함하여 동일한 텍스트에 여러 그림자를 적용할 수 있습니다.
+* `text-shadow` : 그림자의 수평 오프셋, 수직 오프셋, 흐림 반경, 색상을 순서대로 지정합니다. 쉼표로 구분된 여러 그림자 값을 포함하여 동일한 텍스트에 여러 그림자를 적용할 수 있습니다.
 
 ```CSS
 p {
@@ -26,15 +27,16 @@ p {
   text-shadow: 4px 4px 5px red;
 }
 ```
+### 그 외 속성들
 
-* font-variant
+* `font-variant`
-* font-variant-alternates, font-variants-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, font-variant-position
+* `font-variant-alternates`, `font-variants-caps`, `font-variant-east-asian`, `font-variant-ligatures`, `font-variant-numeric`, `font-variant-position`
-* font-size-adjust
+* `font-size-adjust`
-* font-stretch
+* `font-stretch`
-* font-kerning
+* `font-kerning`
-* font-feature-settings
+* `font-feature-settings`
-* text-underline-position
+* `text-underline-position`
-* text-rendering
+* `text-rendering`
 
 ## 텍스트 레이아웃
 
@@ -48,16 +50,20 @@ p {
 }
 ```
 
-* text-indent
+### 그 외 속성들
-* text-overflow
+
-* white-space
+* `text-indent`
-* word-break
+* `text-overflow`
-* direction
+* `white-space`
-* hypens
+* `word-break`
-* line-break
+* `direction`
-* text-align-last
+* `hypens`
-* text-orientation
+* `line-break`
-* word-wrap
+* `text-align-last`
+* `text-orientation`
+* `word-wrap`
+* `word-spacing`
+* `letter-spacing`
 
 ## 웹 폰트
 ```CSS

Writerside/topics/Units-and-Values.md

@@ -31,9 +31,9 @@
 
 ## 색상
 
-* 16진수 RGB
+* 16진수 RGB : #RGB, #RRGGBB, #RGBA, #RRGGBBAA
 * rgb(), rgba()
-* hsl()
+* hsl(), hsla()
 
 ```CSS
 background-color: rgb(2 121 139);