diff --git a/Writerside/topics/Box-Model.md b/Writerside/topics/Box-Model.md index 50b6e6a..f780e42 100644 --- a/Writerside/topics/Box-Model.md +++ b/Writerside/topics/Box-Model.md @@ -4,12 +4,12 @@ 인라인 요소는 새로운 줄에서 시작하지 않으며, `width`, `height` 속성은 무시됩니다. ``, ``, ``, `` 등은 기본적으로 인라인 요소입니다. 박스의 유형은 `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` 을 설정할 수 있습니다. diff --git a/Writerside/topics/Grid.md b/Writerside/topics/Grid.md index b0980a2..bae6bbb 100644 --- a/Writerside/topics/Grid.md +++ b/Writerside/topics/Grid.md @@ -8,6 +8,11 @@ 컨테이너 요소의 `display: grid`를 지정하면 직계 자식 요소는 모두 그리드 아이템이 됩니다. +```CSS +.container { + display: grid; +} +``` ## 그리드 컨테이너 diff --git a/Writerside/topics/Selectors.md b/Writerside/topics/Selectors.md index c9ef423..56df951 100644 --- a/Writerside/topics/Selectors.md +++ b/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 -* :invalid +* :valid, :invalid * :checked -* :disabled -* :enabled +* :disabled, :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 { +} +``` + +### 자손 결합자 첫 번째 선택자와 일치하는 요소의 자손 중에서 하위 선택자와 일치하는 요소를 선택합니다. diff --git a/Writerside/topics/Styling-Form.md b/Writerside/topics/Styling-Form.md index 91ea303..758a08a 100644 --- a/Writerside/topics/Styling-Form.md +++ b/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 | \ No newline at end of file +* `appearance` : none | auto | + + +* `cursor` \ No newline at end of file diff --git a/Writerside/topics/Styling-Table.md b/Writerside/topics/Styling-Table.md index 15163ad..fbc2880 100644 --- a/Writerside/topics/Styling-Table.md +++ b/Writerside/topics/Styling-Table.md @@ -1,3 +1,6 @@ # Styling Table -Start typing here... \ No newline at end of file +* table-layout +* border-collapse +* caption-side : top | bottom + diff --git a/Writerside/topics/Styling-Text.md b/Writerside/topics/Styling-Text.md index 55d5449..4e9c8f7 100644 --- a/Writerside/topics/Styling-Text.md +++ b/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-alternates, font-variants-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, font-variant-position -* font-size-adjust -* font-stretch -* font-kerning -* font-feature-settings -* text-underline-position -* text-rendering +* `font-variant` +* `font-variant-alternates`, `font-variants-caps`, `font-variant-east-asian`, `font-variant-ligatures`, `font-variant-numeric`, `font-variant-position` +* `font-size-adjust` +* `font-stretch` +* `font-kerning` +* `font-feature-settings` +* `text-underline-position` +* `text-rendering` ## 텍스트 레이아웃 @@ -48,16 +50,20 @@ p { } ``` -* text-indent -* text-overflow -* white-space -* word-break -* direction -* hypens -* line-break -* text-align-last -* text-orientation -* word-wrap +### 그 외 속성들 + +* `text-indent` +* `text-overflow` +* `white-space` +* `word-break` +* `direction` +* `hypens` +* `line-break` +* `text-align-last` +* `text-orientation` +* `word-wrap` +* `word-spacing` +* `letter-spacing` ## 웹 폰트 ```CSS diff --git a/Writerside/topics/Units-and-Values.md b/Writerside/topics/Units-and-Values.md index 642776a..dc041e1 100644 --- a/Writerside/topics/Units-and-Values.md +++ b/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);