2024-06-12

README.md

@@ -0,0 +1,2 @@
+# CSS Examples
+

Writerside/c.tree

@@ -17,7 +17,19 @@
         <toc-element topic="Units-and-Values.md"/>
         <toc-element topic="Styling-Text.md"/>
         <toc-element topic="Styling-Image-and-Media.md"/>
-        <toc-element topic="Styling-Table.md"/>
+        <toc-element topic="Styling-List.md"/>
-        <toc-element topic="Layouts.md"/>
+        <toc-element topic="Styling-Link.md"/>
+        <toc-element topic="Styling-Table.md">
+        </toc-element>
+        <toc-element topic="Styling-Form.md"/>
+        <toc-element topic="Layouts.md">
+            <toc-element topic="Flexbox.md"/>
+            <toc-element topic="Grid.md"/>
+            <toc-element topic="Floating.md"/>
+            <toc-element topic="Positioning.md"/>
+            <toc-element topic="Multi-Column.md"/>
+            <toc-element topic="Responsive.md"/>
+            <toc-element topic="Media-Query.md"/>
+        </toc-element>
     </toc-element>
 </instance-profile>

Writerside/topics/Box-Model.md

@@ -1,3 +1,98 @@
-# Box Model
+# Box
 
-Start typing here...
+블록 요소는 새로운 줄에서 시작하며, 상위 컨테이너 너비의 100%를 채웁니다. `<h1>`, `<p>`, `<div>` 등은 기본작으로 블록 요소입니다.
+인라인 요소는 새로운 줄에서 시작하지 않으며, `width`, `height` 속성은 무시됩니다. `<a>`, `<em>`, `<strong>`, `<span>` 등은 기본적으로 인라인 요소입니다.
+
+박스의 유형은 `display` 속성을 통해서 정의할 수 있습니다.
+
+* block
+* inline
+* inline-block
+* flex
+* inline-flex
+
+## 박스 모델
+
+* 컨텐트 영역 : 기본적으로, `width`와 `height` 속성을 지정하면 컨텐트 영역의 크기를 지정하게 됩니다.
+* 패딩 영역 : `padding`
+* 보더(테두리) 영역 : `border`
+* 마진 영역 : `margin`
+
+
+## 크기
+
+* `width`
+* `height`
+* `min-wodth`, `min-height`
+* `max-width`, `max-height`
+
+### 보더 박스 모델
+
+`width`와 `height` 속성이 컨텐트 영역의 크기를 지정하는 대신, 보더 영역의 크기를 지정하도록 합니다.
+
+```CSS
+html {
+    box-sizing: border-box;
+}
+```
+
+## 마진
+
+* `margin`
+* `margin-top`
+* `margin-right`
+* `margin-bottom`
+* `margin-left`
+
+### Margin Collapsing
+
+여백이 서로 맞닿은 두 개의 요소가 있으면 해당 여백은 합쳐져 하나의 여백이 되어서, 그 중 가장 큰 여백의 크기가 됩니다.
+
+## 보더
+
+* `border`
+* `border-top`, `border-right`, `border-bottom`, `border-left`
+* `border-width`
+* `border-style`
+* `border-color`
+* `border-top-width`, `border-top-style`, `border-top-color`
+* `border-right-width`, `border-right-style`, `border-right-color`
+* `border-bottom-width`, `border-bottom-style`, `border-bottom-color`
+* `border-left-width`, `border-left-style`, `border-left-color`
+
+* `border-radius`
+* `border-bottom-left-radius`, `border-bottom-right-radius`, `border-top-left-radius`, `border-top-right-radius`
+
+## 패딩
+
+패딩은 테두리와 콘텐츠 영역 사이에 위치합니다. 마진과는 다르게 패딩은 음수의 크기를 가질 수 없습니다.
+
+* `padding`
+* `padding-top`, `padding-right`, `padding-bottom`, `padding-left`
+
+## 배경
+
+* `background`
+* `background-color`
+* `background-image`
+  * url()
+  * linear-gradient()
+  * radial-gradient()
+* `background-repeat` : no-repeat | repeat-x | repeat-y | repeat
+* `background-size` : cover | contain
+  * cover : 이미지를 박스 면적을 완전히 덮으면서 가로 세로 비율을 유지하며 이미지를 충분히 크게 만듭니다. 이 경우 일부 이미지가 박스 외부에 있을 수 있습니다.
+  * contain : 이미지를 박스 안에 들어가기에 적합한 크기로 만듭니다. 이 경우 이미지의 종횡비가 박스의 종횡비와 다른 경우, 이미지의 한쪽 또는 위쪽과 아래쪽에 간격이 생길 수 있습니다.
+* `background-position`
+* `background-attachment` : scroll | fixed | local
+
+
+## Overflow
+
+`overflow` 의 기본값은 visible 이므로, overflows 가 발생하면 기본적으로 콘텐츠를 볼 수 있습니다. 콘텐츠가 넘칠 때 내용을 자르려면 박스에 `overflow: hidden` 을 설정할 수 있습니다.
+`word-break`는 텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀 지 지정합니다.
+`overflow-wrap`는 어떤 문자가 내용 칸 밖으로 넘치지 않게 브라우저가 단어 마디 안에 줄을 바꿔야 할 것인지 아닌지를 정할 때 사용됩니다.
+
+* `overflow` : visible | hidden | clip | scroll | auto
+* `overflow-x`, `overflow-y`
+* `word-break` : normal | break-all | keep-all | break-word
+* `overflow-wrap` = `word-wrap` : normal | break-word

Writerside/topics/Flexbox.md

@@ -0,0 +1,16 @@
+# Flexbox
+
+flexbox로 레이아웃할 요소의 부모 요소에 `display: flex`를 지정합니다.
+인라인 항목을 flexbox로 취급해 레이아웃하길 희망한다면 `display: inline-flex`로 지정할 수도 있습니다.
+
+```CSS
+div {
+    display: flex;
+}
+```
+
+요소들을 flexbox로 레이아웃될 때 그 상자들은 두 개의 축을 따라 배치됩니다.
+* 기본 축 (main axis) 은 flex item이 배치되고 있는 방향으로 진행하는 축입니다(예: 페이지를 가로지르는 행 또는 페이지 밑으로 쌓이는 열). 이 기본 축의 시작과 끝을 일컬어 main start과 main end라고 합니다.
+* 교차축 (cross axis) 은 flex item이 내부에 배치되는 방향에 직각을 이루는 축입니다. 이 축의 시작과 끝을 일컬어 cross start과 cross end라고 합니다.
+* display: flex이 설정된 부모 요소(우리 예제에서 <section>이 해당)를 일컬어 flex container (flex container) 라고 합니다.
+* flex container 내부에 flexbox로 레이아웃되는 항목을 일컬어 flex item (flex items) 이라고 합니다(우리 예제에서 <article> 요소가 해당됩니다).

Writerside/topics/Floating.md

@@ -0,0 +1,3 @@
+# Floating
+
+Start typing here...

Writerside/topics/Grid.md

@@ -0,0 +1,3 @@
+# Grid
+
+Start typing here...

Writerside/topics/Layouts.md

@@ -1,3 +1,11 @@
 # Layouts
 
-Start typing here...
+## Normal Flow
+
+기본값으로 블록 수준 요소의 내용물은 자기 부모 요소의 너비 100%와 자체 내용물의 최대 높이를 갖습니다. 
+인라인 요소는 자체 내용물의 최대 높이와 최대 너비를 갖습니다. 인라인 요소에 너비나 높이를 설정할 수는 없습니다.
+
+블록 요소는 마지막 요소 아래 새 줄에 나타나며, 각 요소에 주어진 margin에 의해 구분됩니다.
+인라인 요소는 새로운 줄에 나타나는 대신, 다른 요소와 같은 라인에 차례로 자리 잡습니다. 다만 인접(혹은 접힌) 텍스트 콘텐츠는 해당 부모의 블록 수준 요소의 너비 내에서 자신이 자리를 잡을 수 있는 공간이 있는 경우가 해당합니다. 충분한 공간이 없을 경우 overflow되는 텍스트 또는 요소는 새로운 줄에 나타납니다.
+
+

Writerside/topics/Media-Query.md

@@ -0,0 +1,3 @@
+# Media Query
+
+Start typing here...

Writerside/topics/Multi-Column.md

@@ -0,0 +1,3 @@
+# 다단 레이아웃
+
+Start typing here...

Writerside/topics/Positioning.md

@@ -0,0 +1,3 @@
+# 위치 잡기
+
+Start typing here...

Writerside/topics/Responsive.md

@@ -0,0 +1,4 @@
+# 반응형 레이아웃
+
+
+Start typing here...

Writerside/topics/Selectors.md

@@ -140,8 +140,36 @@ div[class*="box-"] {
 
 ### 후손 결합자
 
+첫 번째 선택자와 일치하는 요소의 자손 중에서 하위 선택자와 일치하는 요소를 선택합니다.
+
+```CSS
+p .highlight {
+}
+```
+
 ### 자식 결합자
 
+첫 번째 선택자와 일치하는 요소의 직접 자손 중에서 하위 선택자와 일치하는 요소를 선택합니다.
+
+```CSS
+p > .highlight {
+}
+```
+
 ### 인접 형제 결합자
 
+첫 번째 선택자와 일치하는 요소의 인접 형제 노드가 하위 선택자와 일치하는 요소를 선택합니다.
+
+```CSS
+p + .highlight {
+}
+```
+
 ### 일반 형제 결합자
+
+첫 번째 선택자와 일치하는 요소의 형제 중 하위 선택자와 일치하는 요소를 선택합니다.
+
+```CSS
+p ~ .highlight {
+}
+```

Writerside/topics/Styling-Form.md

@@ -0,0 +1,6 @@
+# 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 | 

Writerside/topics/Styling-Image-and-Media.md

@@ -1,3 +1,10 @@
 # Styling Image and Media
 
-Start typing here...
+* `width`
+* `height`
+* `min-wodth`, `min-height`
+* `max-width`, `max-height`
+* `object-fit` : fill | contain | cover | none | scale-down
+* `object-position`
+
+

Writerside/topics/Styling-Link.md

@@ -0,0 +1,21 @@
+# Styling Link
+
+```CSS
+a {
+}
+
+a:link {
+}
+
+a:visited {
+}
+
+a:focus {
+}
+
+a:hover {
+}
+
+a:active {
+}
+```

Writerside/topics/Styling-List.md

@@ -0,0 +1,6 @@
+# Styling List
+
+* `list-style`
+* `list-style-type` : none | disc | circle | square | decimal | cjk-decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | korean-hangul-formal | korean-hanja-formal | ...
+* `list-style-position` : inside | outside
+* `list-style-image`

Writerside/topics/Styling-Text.md

@@ -1,3 +1,78 @@
 # Styling Text
 
-Start typing here...
+## 텍스트
+
+* `color`
+* `font`
+* `font-family` : 둘 이상의 단어가 있는 글꼴 이름은 따옴표로 묶어야합니다
+  * Arial | Courier New | Georgia | Times New Roman | Trebuchet MS | Verdana
+  * serif | sans-serif | monospace | cursive | fantasy
+* `font-size`
+* `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-line`, `text-decoration-style`, `text-decoration-color`
+* `text-shadow` : 그림자의 수평 오프셋, 수직 오프셋, 흐림 반경, 색상. 쉼표로 구분된 여러 그림자 값을 포함하여 동일한 텍스트에 여러 그림자를 적용할 수 있습니다.
+
+```CSS
+p {
+  font-family: "Trebuchet MS", Verdana, sans-serif;
+}
+```
+
+```CSS
+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
+
+## 텍스트 레이아웃
+
+* `text-align` : left | right | center | justify
+* `line-height` : 일반적으로 단위 없는 값을 사용합니다.
+
+
+```CSS
+p {
+  line-height: 1.5;
+}
+```
+
+* text-indent
+* text-overflow
+* white-space
+* word-break
+* direction
+* hypens
+* line-break
+* text-align-last
+* text-orientation
+* word-wrap
+
+## 웹 폰트
+```CSS
+@font-face {
+  font-family: "myFont";
+  src: url("myFont.woff2");
+}
+html {
+  font-family: "myFont", "Bitstream Vera Serif", serif;
+}
+```
+
+## 글 쓰기 방향
+
+* `writing-mode` : horizontal-tb | vertical-rl | vertical-lr
+
+쓰기 모드를 전환하면, 블록 (block) 방향과 인라인 (inline) 방향을 변경합니다. 블록 크기는 항상 쓰기 모드에서 페이지에 표시되는 방향 블록입니다. 인라인 크기는 항상 문장이 표시되는 방향입니다.
+

Writerside/topics/Units-and-Values.md

@@ -1,3 +1,43 @@
 # Units and Values
 
-Start typing here...
+## 절대 길이 단위
+
+* cm
+* mm
+* Q
+* in
+* pc
+* pt
+* px
+
+## 상대 길이 단위
+
+* %
+* em : 요소의 글꼴 크기
+* ex : 요소 글꼴의 'x' 문자 높이
+* ch : 요소 글꼴의 '0' 문자 너비
+* rem : 루트 요소의 글꼴 크기
+* lh : 요소의 줄 높이
+* rlh : 루트 요소의 라인 높이
+* vw : 뷰포트 너비의 1%
+* vh : 뷰포트 높이의 1%
+* vmin : 뷰포트 크기 중 작은 치수의 1%
+* vmax : 뷰포트 크기 중 큰 치수의 1%
+* vb : 블록 축 크기의 1%
+* vi : 인라인 축 크기의 1%
+* svw, svh : 작은 뷰포크 크기의 1%
+* lvw, lvh : 큰 뷰포트 크기의 1%
+* dvw, dvh : 동적인 뷰포트 크기의 1%
+
+## 색상
+
+* 16진수 RGB
+* rgb(), rgba()
+* hsl()
+
+```CSS
+background-color: rgb(2 121 139);
+background-color: rgb(2 121 139 / .3);
+background-color: hsl(188 97% 28%);
+background-color: hsl(188 97% 28% / .3);
+```

src/selectors.html

@@ -0,0 +1,24 @@
+<!--
+  ~ Copyright (c) 2024. Elex. All Rights Reesrved.
+  ~ https://www.elex-project.com/
+  -->
+
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <title>CSS Selectors</title>
+    <style>
+        div *:first-child {
+            color: red;
+        }
+    </style>
+</head>
+<body>
+<div>
+    <p>이것은 첫 번째 문단입니다.</p>
+    <p>그리고, 이것은 두번째 문단입니다.</p>
+    <p>마지막으로, 이것은 세번째 문단입니다.</p>
+</div>
+</body>
+</html>