From 7936270d106bbad4b018d77b5157b1ce7575b92d Mon Sep 17 00:00:00 2001 From: Elex Date: Mon, 3 Feb 2025 13:25:31 +0900 Subject: [PATCH] 2025-02-03T13:25:31 --- docs/{00_css.md => 00_CSS.md} | 20 --- docs/01_선택자.md | 19 ++- docs/02_단위.md | 10 ++ docs/03_박스 모델.md | 170 ++++++++++++++------ docs/04_레이아웃.md | 21 +++ docs/05_배경 및 색상.md | 248 +++++++++++++++++++++++++++++- docs/06_글꼴 및 텍스트 스타일.md | 240 ++++++++++++++++++++++++++++- docs/07_Flexbox.md | 214 +++++++++++++++++++++++++- docs/07_리스트와 테이블.md | 23 +++ docs/08_CSS Grid.md | 199 +++++++++++++++++++++++- docs/09_다단 레이아웃.md | 99 ++++++++++++ docs/09_애니메이션 및 트랜지션.md | 6 - docs/10_애니메이션 및 트랜지션.md | 246 +++++++++++++++++++++++++++++ docs/11_CSS 변수.md | 101 +++++++++++- docs/12_CSS 함수.md | 182 ++++++++++++++++++++++ docs/12_미디어퀴리.md | 1 - docs/13_미디어퀴리.md | 159 +++++++++++++++++++ docs/14_스크롤 스냅.md | 10 ++ docs/15_폼.md | 10 ++ docs/16_이미지.md | 10 ++ docs/21_반응형 레이아웃.md | 6 + 21 files changed, 1896 insertions(+), 98 deletions(-) rename docs/{00_css.md => 00_CSS.md} (92%) create mode 100644 docs/07_리스트와 테이블.md create mode 100644 docs/09_다단 레이아웃.md delete mode 100644 docs/09_애니메이션 및 트랜지션.md create mode 100644 docs/10_애니메이션 및 트랜지션.md create mode 100644 docs/12_CSS 함수.md delete mode 100644 docs/12_미디어퀴리.md create mode 100644 docs/13_미디어퀴리.md create mode 100644 docs/14_스크롤 스냅.md create mode 100644 docs/15_폼.md create mode 100644 docs/16_이미지.md create mode 100644 docs/21_반응형 레이아웃.md diff --git a/docs/00_css.md b/docs/00_CSS.md similarity index 92% rename from docs/00_css.md rename to docs/00_CSS.md index d0a1589..deb50dc 100644 --- a/docs/00_css.md +++ b/docs/00_CSS.md @@ -192,23 +192,3 @@ p { 이렇게 하면 어떤 선택자보다도 color: blue가 적용됨. 하지만 너무 많이 사용하면 유지보수가 어려워지니 필요할 때만 쓰는 게 좋아! ---- - - -5. CSS 실전 예제 -네비게이션 바 스타일링 -카드 UI 디자인 -반응형 웹사이트 만들기 -다크 모드 구현 -CSS 애니메이션 활용 - -6. 최적화 및 모범 사례 -CSS 성능 최적화 -유지보수하기 쉬운 CSS 작성법 -BEM (Block, Element, Modifier) 방법론 -SCSS/SASS 개요 - -7. 부록 -CSS 주요 속성 및 값 요약표 -크로스 브라우징 이슈 해결 -유용한 CSS 리소스 및 도구 \ No newline at end of file diff --git a/docs/01_선택자.md b/docs/01_선택자.md index 41c4b5f..7145417 100644 --- a/docs/01_선택자.md +++ b/docs/01_선택자.md @@ -1,8 +1,25 @@ -# 선택자 +# CSS 선택자 CSS 선택자는 HTML 요소를 선택하여 스타일을 적용하는 데 사용돼. 선택자를 잘 활용하면 코드의 가독성과 유지보수성이 높아져! +| 선택자 | | +|---|---| +| * | 전체 선택자 | +| tagname | 요소 선택자 | +| .classname | 클래스 선택자 | +| #idname | 아이디 선택자 | +| A, B, C | 그룹 선택자 | +| A > B | 자식 선택자 | +| A B | 후손 선택자 | +| A + B | 인접 형제 선택자 | +| A ~ B | 일반 형제 선택자 | +| [attr] | 속성 선택자 | +| [attr="value"] | 특정 값과 일치 | +| [attr^="value"] | 특정 값으로 시작 | +| [attr$="value"] | 특정 값으로 끝 | +| [attr*="value"] | 특정 값이 포함 | + ## 기본 선택자 (Basic Selectors) ### 전체 선택자 (`*`) diff --git a/docs/02_단위.md b/docs/02_단위.md index 2f4f9e9..77143c0 100644 --- a/docs/02_단위.md +++ b/docs/02_단위.md @@ -18,6 +18,7 @@ CSS 단위는 크게 절대 단위와 상대 단위로 나뉘어. * 가장 많이 쓰이는 단위 * 디바이스의 **물리적 픽셀(pixel)**을 기준으로 함 * 고정된 크기이기 때문에 반응형 디자인에는 다소 불리함 + ```css p { font-size: 16px; @@ -64,6 +65,7 @@ div { * 부모 요소의 font-size를 기준으로 크기가 결정됨 * 기본적으로 1em = 부모 글자 크기 * 배수로 크기를 조정할 수 있음 + ```css .parent { font-size: 20px; @@ -74,6 +76,7 @@ div { /* 부모가 20px이면, 자식 요소의 글자 크기는 30px이 됨. */ } ``` + > em을 중첩해서 사용하면 예상보다 큰 값이 나올 수 있음! > ```css > body { @@ -90,6 +93,7 @@ div { ### rem (루트 요소 의 글자 크기 기준) * html 요소의 font-size를 기준으로 크기 결정 * em과 달리 부모 요소에 영향을 받지 않음 + ```css html { font-size: 16px; @@ -108,32 +112,38 @@ html { ### vw / vh (뷰포트 기준) * vw: 브라우저 너비(Viewport Width)의 % * vh: 브라우저 높이(Viewport Height)의 % + ```css div { width: 50vw; /* 화면 너비의 50% */ height: 30vh; /* 화면 높이의 30% */ } ``` + > 반응형 디자인에서 매우 유용! ### vmin / vmax (작은 쪽 or 큰 쪽 기준) * vmin: vw와 vh 중 작은 값 사용 * vmax: vw와 vh 중 큰 값 사용 + ```css div { width: 10vmin; /* 작은 쪽의 10% */ height: 20vmax; /* 큰 쪽의 20% */ } ``` + > 정사각형 요소를 만들 때 유용! ### ex / ch (문자 기준) * ex: 소문자 x의 높이를 기준으로 크기 지정 * ch: 숫자 0의 너비를 기준으로 크기 지정 + ```css p { width: 10ch; /* 숫자 0이 10개 들어갈 크기 */ } ``` + > 코드 블록이나 글자 기반 디자인에서 유용! diff --git a/docs/03_박스 모델.md b/docs/03_박스 모델.md index 48ee123..381fea3 100644 --- a/docs/03_박스 모델.md +++ b/docs/03_박스 모델.md @@ -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을 사용하면 윤곽선과 요소 사이의 간격을 조절할 수 있어. + + diff --git a/docs/04_레이아웃.md b/docs/04_레이아웃.md index 0ce95bc..e1bb061 100644 --- a/docs/04_레이아웃.md +++ b/docs/04_레이아웃.md @@ -1,5 +1,17 @@ # 레이아웃 +| 속성 | 설명 | 옵션 | +|---|---|---| +| display | 요소의 표시 방법을 결정 | block, inline, none, inline-block, flex, grid | +| position | 요소의 위치 지정 방식 | static, relative, absolute, fixed, sticky | +| top / right / bottom / left | 요소의 위치 지정 | +| z-index | 요소의 쌓이는 순서 지정 | auto | +| float | 요소를 왼쪽 또는 오른쪽으로 배치 | left, right, none | +| clear | float 적용 요소 다음의 요소가 떠다니지 않도록 정리 | none, left, right, both | +| overflow | 내용이 컨테이너를 벗어날 때 처리 방법 | visible, hidden, scroll, auto | +| visibility | 요소를 보이거나 숨김 | visible, hidden, collapse | + + ## display 요소가 어떻게 배치되는지를 결정 * block : 블록 요소 (새 줄에서 시작) @@ -30,6 +42,14 @@ } ``` +### Normal Flow + +기본값으로 블록 수준 요소의 내용물은 자기 부모 요소의 너비 100%와 자체 내용물의 최대 높이를 갖습니다. +인라인 요소는 자체 내용물의 최대 높이와 최대 너비를 갖습니다. 인라인 요소에 너비나 높이를 설정할 수는 없습니다. + +블록 요소는 마지막 요소 아래 새 줄에 나타나며, 각 요소에 주어진 margin에 의해 구분됩니다. +인라인 요소는 새로운 줄에 나타나는 대신, 다른 요소와 같은 라인에 차례로 자리 잡습니다. 다만 인접(혹은 접힌) 텍스트 콘텐츠는 해당 부모의 블록 수준 요소의 너비 내에서 자신이 자리를 잡을 수 있는 공간이 있는 경우가 해당합니다. 충분한 공간이 없을 경우 overflow되는 텍스트 또는 요소는 새로운 줄에 나타납니다. + ## top, right, bottom, left * top : 요소를 위에서 아래로 이동 * right : 요소를 오른쪽에서 왼쪽으로 이동 @@ -125,6 +145,7 @@ float 속성을 사용할 때, 레이아웃이 깨지는 걸 방지하는 용도 overflow: hidden; } /* 넘치는 부분이 잘려서 보이지 않음 */ ``` +### overflow-x / overflow-y ## visibility visibility 속성은 요소를 보이거나 숨길 때 사용되며, `display: none;`과의 차이가 있음! diff --git a/docs/05_배경 및 색상.md b/docs/05_배경 및 색상.md index 648eda2..b7d8d09 100644 --- a/docs/05_배경 및 색상.md +++ b/docs/05_배경 및 색상.md @@ -1,8 +1,244 @@ # 배경 및 색상 +웹페이지의 디자인을 풍부하게 만들려면 배경(Background)과 색상(Color) 관련 속성을 잘 활용해야 해! + +| 속성 | 설명 | 옵션 | +|---|---|---| +| background | 요소의 배경 | | +| color | 글자 색상을 지정 | | +| opacity | 요소의 투명도 | 0 ~ 1 | + +## background +```css +.box { + background: lightblue url('background.jpg') no-repeat center/cover; +} +``` + +### background-color +요소의 배경 색을 지정 +* 색상 값: red, #ff0000, rgb(255, 0, 0), rgba(255, 0, 0, 0.5), transparent 등 +```css +.box { + background-color: lightblue; +} +``` + +### background-image +배경에 이미지를 추가할 때 사용 +```css +.box1 { + background-image: url('background.jpg'); +} +.box2 { + background-image: linear-gradient(to right, red, blue); +} +``` + +### background-size +배경 이미지를 어떻게 크기 조정할지 결정 +* auto : 원본 크기 유지 (기본값) +* cover : 요소를 덮도록 확대 (비율 유지) +* contain : 요소 안에 맞춤 (비율 유지) +* 100px 200px : 가로 100px, 세로 200px 크기로 조정 +```css +.box { + background-image: url('background.jpg'); + background-size: cover; +} +``` + +### background-position +배경 이미지가 요소 안에서 어디에 배치될지를 지정 +* left top : 왼쪽 상단 (기본값) +* center center: 정중앙 +* right bottom : 오른쪽 하단 +* 50% 50% : 가로 50%, 세로 50% (중앙 정렬) +```css +.box { + background-image: url('background.jpg'); + background-position: center; +} +``` + +### background-repeat +배경 이미지가 반복되는 방식 설정 +* repeat : 가로와 세로로 반복 (기본값) +* repeat-x : 가로 방향으로만 반복 +* repeat-y : 세로 방향으로만 반복 +* no-repeat : 반복 없음 +```css +.box { + background-image: url('pattern.png'); + background-repeat: no-repeat; +} +``` + +### background-attachment +배경 이미지가 스크롤될 때 움직이는 방식 설정 +* scroll : 스크롤 시 배경도 함께 이동 (기본값) +* fixed : 배경을 고정 (스크롤해도 움직이지 않음) +* local : 콘텐츠 안에서만 스크롤됨 +```css +.box { + background-image: url('background.jpg'); + background-attachment: fixed; +} +``` + +### background-clip +배경이 요소의 어느 영역까지 확장될지를 결정 +* border-box : 테두리까지 확장 (기본값) +* padding-box : 패딩까지만 적용 +* content-box : 내용 영역까지만 적용 +```css +.box { + background-color: lightblue; + background-clip: padding-box; +} +``` + +### background-origin +배경 이미지가 시작되는 기준점을 결정 +* border-box : 테두리를 기준으로 시작 +* padding-box : 패딩을 기준으로 시작 (기본값) +* content-box : 내용 영역을 기준으로 시작 +```css +.box { + background-image: url('background.jpg'); + background-origin: content-box; +} +``` + +## color +글자 색상을 지정 +```css +p { + color: red; /* 글자를 빨간색으로 설정 */ +} +``` +```css +p { + color: rgba(255, 0, 0, 0.5); +} +``` + +## opacity +요소 전체의 투명도를 조절 +* 0 ~ 1 값 사용 +```css +.box { + background-color: black; + opacity: 0.5; +} +``` +> opacity를 사용하면 요소 전체가 투명해지므로, +배경만 투명하게 하려면 rgba()를 사용해야 함! +> ```css +> .box { +> background-color: rgba(0, 0, 0, 0.5); /* 배경만 투명 */ +> } +> ``` + +## 색상 값 +CSS에서는 다양한 방식으로 색상을 표현할 수 있어. + +### 색상 이름 (Color Keywords) +CSS는 기본적으로 140개 이상의 색상 이름을 제공해. +red, blue, green, yellow 같은 이름을 사용하면 쉽게 색상을 지정할 수 있어. + +* 기본 색상: red, blue, green, yellow, black, white +* 밝은 색상: lightblue, lightgreen, lightgray +* 어두운 색상: darkblue, darkred, darkgray +* 투명한 색상: transparent + +```css +h1 { + color: red; /* 빨간색 */ +} +p { + color: lightblue; /* 연한 파란색 */ +} +``` +### HEX 코드 (#RRGGBB) +HEX 코드(16진수)는 빨강(R), 초록(G), 파랑(B) 값을 조합하여 색상을 표현하는 방식이야. +#RRGGBB 형식으로 사용되며, 각 값은 00(0%) ~ FF(100%) 사이의 숫자로 표현돼. +```css +h1 { + color: #ff0000; /* 빨강 */ +} +p { + color: #00ff00; /* 초록 */ +} +span { + color: #0000ff; /* 파랑 */ +} +``` +> 세 자리 HEX 값은 자동으로 확장됨! (#F00 = #FF0000) +```css +h1 { + color: #f00; /* 빨강 */ +} +``` +### RGB (rgb(R, G, B)) +RGB는 빨강(R), 초록(G), 파랑(B) 값을 0~255 범위의 숫자로 지정하는 방식이야. +16진수를 이해하기 어려울 때 더 직관적으로 사용할 수 있어! + +```css +h1 { + color: rgb(255, 0, 0); /* 빨강 */ +} +p { + color: rgb(0, 255, 0); /* 초록 */ +} +span { + color: rgb(0, 0, 255); /* 파랑 */ +} +``` +### RGBA (rgba(R, G, B, A)) +RGBA는 RGB 색상에 투명도(A: Alpha) 값을 추가한 형식이야. +A 값은 0(완전 투명) ~ 1(완전 불투명) 사이의 숫자로 설정돼. +```css +h1 { + color: rgba(255, 0, 0, 0.5); /* 반투명 빨강 */ +} +p { + color: rgba(0, 255, 0, 0.3); /* 더 투명한 초록 */ +} +span { + color: rgba(0, 0, 255, 0.8); /* 조금만 투명한 파랑 */ +} +``` +### HSL (hsl(H, S, L)) +HSL은 색상(Hue), 채도(Saturation), 밝기(Lightness) 를 기준으로 색상을 지정하는 방식이야. +직관적으로 색상을 조절할 수 있는 장점이 있어! +* H (색상) : 0~360 (빨강: 0, 초록: 120, 파랑: 240) +* S (채도) : 0% (회색) ~ 100% (선명한 색) +* L (밝기) : 0% (검정) ~ 100% (흰색) +```css +h1 { + color: hsl(0, 100%, 50%); /* 빨강 */ +} +p { + color: hsl(120, 100%, 50%); /* 초록 */ +} +span { + color: hsl(240, 100%, 50%); /* 파랑 */ +} +``` +### HSLA (hsla(H, S, L, A)) +HSLA는 HSL 색상에 투명도(A: Alpha) 값을 추가한 방식이야. +RGBA와 동일하게 투명도를 0(완전 투명) ~ 1(완전 불투명) 범위로 조절 가능! +```css +h1 { + color: hsla(0, 100%, 50%, 0.5); /* 반투명 빨강 */ +} +p { + color: hsla(120, 100%, 50%, 0.3); /* 더 투명한 초록 */ +} +span { + color: hsla(240, 100%, 50%, 0.8); /* 조금만 투명한 파랑 */ +} +``` + + -* background-color -* background-image -* background-size -* background-position -* background-repeat -* opacity diff --git a/docs/06_글꼴 및 텍스트 스타일.md b/docs/06_글꼴 및 텍스트 스타일.md index 2d3ecee..a09de88 100644 --- a/docs/06_글꼴 및 텍스트 스타일.md +++ b/docs/06_글꼴 및 텍스트 스타일.md @@ -1,9 +1,233 @@ # 글꼴 및 텍스트 스타일 -* color -* font-family -* font-size, font-weight, font-style -* letter-spacing, word-spacing -* text-align, text-indent -* text-decoration -* text-transform -* white-space +웹페이지에서 텍스트를 멋지게 스타일링하려면 글꼴(Font)과 텍스트(Text) 관련 CSS 속성을 잘 활용해야 해! + +| 속성 | 설명 | +|---|---| +| font | | +| text-align | | +| text-decoration | | +| text-shadow | | +| text-transform | | +| text-indent | | +| letter-spacing | | +| word-spacing | | +| line-height | | +| white-space | | + +## font +font 속성을 사용하면 font-style, font-variant, font-weight, font-size, font-family를 한 줄로 설정할 수 있음. +```css +p { + font: italic small-caps bold 20px Arial, sans-serif; +} +``` + +font- 접두어가 붙은 속성들은 글꼴 스타일을 지정하는 역할을 해. 글자 크기, 두께, 스타일, 종류 등을 설정할 수 있어! + + +### font-family +텍스트의 글꼴을 설정하는 속성. 여러 개의 글꼴을 쉼표(,)로 나열할 수 있음! +> 브라우저에 없는 글꼴은 적용되지 않으므로, 백업용 폰트도 설정하는 게 좋음! +* serif | sans-serif | monospace | cursive | fantasy +```css +p { + font-family: Arial, sans-serif; + /* 첫 번째 글꼴(Arial)이 없으면, 대체 글꼴(sans-serif)이 적용됨 */ +} +``` +#### 웹 폰트 적용 (Google Fonts 예제) +```css +@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); + +p { + font-family: 'Roboto', sans-serif; +} +``` +### font-size +텍스트의 크기를 설정하는 속성 +* 단위: px, em, rem, %, vw, vh 등 +```css +p { + font-size: 1.2em; /* 부모 요소의 1.2배 크기 */ +} +h1 { + font-size: 2rem; /* `html` 기본 크기(16px)의 2배 → 32px */ +} +``` +> em은 부모 요소의 크기를 기준으로 하고, rem은 `` 요소를 기준으로 함. + +#### font-size-adjust + +### font-weight +글자의 굵기를 설정하는 속성 +* 400 (기본), 700 (굵음) 같은 숫자 값을 사용하거나, normal, bold, lighter, bolder 같은 키워드를 사용 가능 +```css +p { + font-weight: bold; /* 굵게 */ +} +h1 { + font-weight: 700; /* 700 (굵은 폰트) */ +} +``` +> 숫자로 설정하면 세밀한 굵기 조정이 가능함! +* 100 : 매우 가늘게 +* 400 : 기본값 (normal) +* 700 : 굵게 (bold) +* 900 : 가장 굵게 + +### font-style +글자의 기울임 스타일을 지정하는 속성 +* 값: normal, italic, oblique +```css +p { + font-style: italic; /* 이탤릭체 */ +} +h2 { + font-style: oblique; /* 기울어진 텍스트 */ +} +``` +> 이탤릭(italic)과 oblique(기울어진 텍스트)는 비슷하지만, 폰트에 따라 다르게 보일 수 있음! + +### font-variant +small-caps 값 사용 시 소문자를 작은 대문자로 변환 +```css +p { + font-variant: small-caps; +} +``` +#### font-variant-alternates / font-variants-caps / font-variant-east-asian / font-variant-ligatures / font-variant-numeric / font-variant-position` + +### font-stretch +### font-kerning +### font-feature-settings + +## text-align +텍스트의 정렬 방식을 지정하는 속성 +* 값: left, right, center, justify +```css +p { /* 텍스트를 중앙 정렬 */ + text-align: center; +} +``` +```css +p { /* 텍스트가 좌우 균형을 맞춰 정렬됨 */ + text-align: justify; +} +``` + +## text-align-last + +## text-decoration +텍스트에 밑줄, 취소선 등을 추가할 때 사용 +* none : 기본값 (장식 없음) +* underline : 밑줄 +* overline : 위줄 +* line-through : 취소선 +```css +/* 밑줄과 취소선을 동시에 적용 */ +p { + text-decoration: underline line-through; +} +``` +### text-decoration-line +* none, underline, overline, line-through +### text-decoration-style +* solid, double, dotted, dashed, wavy +### text-decoration-color + +### text-underline-position +### text-rendering + +## text-orientation + +## text-shadow +그림자의 수평 오프셋, 수직 오프셋, 흐림 반경, 색상을 순서대로 지정합니다. 쉼표로 구분된 여러 그림자 값을 포함하여 동일한 텍스트에 여러 그림자를 적용할 수 있습니다. + +## text-transform +텍스트를 자동으로 대문자, 소문자로 변환 +* uppercase : 모두 대문자 변환 +* lowercase : 모두 소문자 변환 +* capitalize : 단어의 첫 글자만 대문자 +```css +p { /* 텍스트를 모두 대문자로 변환 */ + text-transform: uppercase; +} +``` + +## text-indent +문단의 첫 줄을 들여쓰기 할 때 사용하는 속성 +```css +p { + text-indent: 30px; +} +``` +음수 값을 사용해서, 첫 줄을 왼쪽으로 당길 수도 있음! +```css +p { + text-indent: -20px; +} +``` +> 모든 줄을 들여쓰기 하려면 margin-left 사용! + +## text-overflow + +## letter-spacing +글자 사이의 간격을 조절 +```css +p { + letter-spacing: 2px; +} +``` + +## word-spacing +단어 사이의 간격을 조절 +```css +p { + word-spacing: 5px; +} +``` + +## line-height +줄 간격을 조절 +```css +p { /* 줄 간격을 1.5배로 조절 */ + line-height: 1.5; +} +``` + +## white-space +공백, 줄바꿈, 자동 줄바꿈(줄바꿈 방지) 등을 설정하는 속성 +* normal : 여러 개의 공백을 하나로 줄이고, 텍스트가 넘치면 자동 줄바꿈됨! +* nowrap : 줄바꿈 없이 한 줄로 표시됨! + - 가로 스크롤이 생길 수도 있음 + - 버튼이나 제목처럼 한 줄로 유지해야 하는 경우 유용! +* pre : HTML 코드에서 입력한 공백과 줄바꿈을 그대로 유지함! + - 소스 코드 표시(`
`) 같은 경우에 적합!
+* pre-wrap : 공백과 줄바꿈을 유지하면서도, 요소의 너비를 넘기면 자동 줄바꿈됨!
+    - 반응형 웹 디자인에서 유용!
+* pre-line : 줄바꿈은 유지하지만, 여러 개의 공백은 하나로 줄임!
+```css
+p {
+  white-space: pre-wrap;
+}
+```
+
+## line-break
+
+## word-break
+텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀 지 지정
+* normal | break-all | keep-all | break-word
+
+## word-wrap = overflow-wrap
+어떤 문자가 내용 칸 밖으로 넘치지 않게 브라우저가 단어 마디 안에 줄을 바꿔야 할 것인지 아닌지를 정할 때 사용
+* normal | break-word
+
+## direction
+
+## hypens
+
+## writing-mode
+글 쓰기 방향
+* horizontal-tb | vertical-rl | vertical-lr
+
+쓰기 모드를 전환하면, 블록 (block) 방향과 인라인 (inline) 방향을 변경합니다. 블록 크기는 항상 쓰기 모드에서 페이지에 표시되는 방향 블록입니다. 인라인 크기는 항상 문장이 표시되는 방향입니다.
diff --git a/docs/07_Flexbox.md b/docs/07_Flexbox.md
index 82d98f5..180a68b 100644
--- a/docs/07_Flexbox.md
+++ b/docs/07_Flexbox.md
@@ -1,8 +1,210 @@
 # Flexbox
+Flexbox(플렉스박스)는 요소를 효율적으로 정렬하고 배치하는 강력한 레이아웃 시스템이야.
+> 가로, 세로 정렬을 쉽게 제어하고, 반응형 디자인에 유용!
+
+| 부모 속성 | 설명 | 옵션 |
+|---|---|---|
+| flex-direction | 주축 방향 설정 | row, row-reverse, column, column-reverse |
+| justify-content | 주축 방향에서 아이템 정렬 | flex-start, flex-end, center, space-between, space-around, space-evenly |
+| align-items | 교차축 방향에서 아이템 정렬 | flex-start, flex-end, center, stretch, baseline |
+| align-content | 여러 줄 정렬 | flex-start, flex-end, center, space-between, space-around, stretch |
+| flex-wrap | 자동 줄바꿈 | nowrap, wrap, wrap-reverse |
+| flex-flow | = flex-direction + flex-wrap |
+
+| 자식 속성 | 설명 | 옵션 |
+|---|---|---|
+| flex | = flex-grow + flex-shrink + flex-basis |
+| flex-grow | 남은 공간 비율 |
+| flex-shrink | 축소 비율 |
+| flex-basis | 기본 크기 | auto |
+| align-self | 개별적 아이템 정렬 | auto, flex-start, flex-end, center, baseline, stretch |
+| order | 순서 변경 |
+
+
+## Flexbox 개념 및 기본 구조
+Flexbox는 **부모 요소(flex container)와 자식 요소(flex items)**로 구성돼.
+```css
+.container {
+  display: flex;
+} /* .container 내부의 모든 자식 요소가 Flex 아이템이 되어 정렬됨. */
+```
+
+요소들을 flexbox로 레이아웃될 때 그 상자들은 두 개의 축을 따라 배치됩니다.
+* 주축 (main axis) 은 flex item이 배치되고 있는 방향으로 진행하는 축입니다. 이 기본 축의 시작과 끝을 일컬어 main start과 main end라고 합니다.
+* 교차축 (cross axis) 은 flex item이 내부에 배치되는 방향에 직각을 이루는 축입니다. 이 축의 시작과 끝을 일컬어 cross start과 cross end라고 합니다.
+* `display: flex`이 설정된 부모 요소를 일컬어 플렉스 컨테이너 (flex container) 라고 합니다.
+* 플렉스 컨테이너 내부에 flexbox로 레이아웃되는 항목을 일컬어 플렉스 아이템 (flex items) 이라고 합니다.
+
+### display: flex 기본 효과
+* flex를 적용한 요소의 자식 요소(flex items)가 한 줄에 정렬됨
+* 자식 요소의 width는 자동으로 콘텐츠 크기에 맞게 조정됨
+* 기본적으로 가로 방향(row) 정렬. inline 요소도 블록처럼 배치됨
+```css
+.container {
+  display: flex;
+  background-color: lightgray;
+}
+.item {
+  width: 100px;
+  height: 50px;
+  background-color: skyblue;
+  margin: 5px;
+}
+```
+```html
+

+  
1

+  
2

+  
3

+

+```
+
+## 부모 요소(.container) 속성
+Flexbox 컨테이너(부모 요소)에서 레이아웃을 조정할 수 있는 주요 속성들!
+
+### flex-direction
+주축(main axis) 방향을 설정
+* row :	기본값 (왼쪽 → 오른쪽 정렬)
+* row-reverse :	오른쪽 → 왼쪽 정렬
+* column :	위 → 아래 정렬
+* column-reverse :	아래 → 위 정렬
+
+```css
+.container {
+  display: flex;
+  flex-direction: column;
+} /* 아이템이 세로 방향으로 정렬됨! */
+```
+
+### justify-content
+주축(main axis) 방향에서 아이템 정렬 방식
+* flex-start :	왼쪽 정렬 (기본값)
+* flex-end :	오른쪽 정렬
+* center :	가운데 정렬
+* space-between :	양끝 정렬 (사이 간격 자동)
+* space-around :	요소 주변 간격 동일
+* space-evenly :	요소 간 간격 동일
+```css
+.container {
+  display: flex;
+  justify-content: center;
+} /* 아이템이 가로 방향으로 가운데 정렬됨! */
+```
+
+### align-items
+교차축(cross axis) 방향에서 아이템 정렬 방식
+* flex-start :	위쪽 정렬
+* flex-end :	아래쪽 정렬
+* center :	세로 중앙 정렬
+* stretch :	높이를 컨테이너에 맞게 늘림 (기본값)
+* baseline :	텍스트 기준선에 맞춤
+```css
+.container {
+  display: flex;
+  align-items: center;
+}
+```
+
+### align-content
+여러 줄의 아이템 정렬 방식 (flex-wrap: wrap 필요)
+* flex-start :	위쪽 정렬
+* flex-end :	아래쪽 정렬
+* center :	가운데 정렬
+* space-between :	위아래 간격 동일
+* space-around :	요소 주변 간격 동일
+* stretch :	전체 높이를 채움
+```css
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: center;
+}
+```
+
+### flex-wrap
+flex-wrap 속성은 Flexbox 컨테이너 안의 아이템이 한 줄에 배치될지, 여러 줄로 나눠질지를 결정하는 속성이야.
+> 기본적으로 flex는 한 줄(nowrap)에 모든 아이템을 배치하지만, flex-wrap을 설정하면 자동 줄바꿈이 가능!
+* nowrap :	한 줄에 모든 아이템을 배치 (기본값)
+* wrap :	자동으로 줄바꿈하여 여러 줄로 배치
+* wrap-reverse :	줄바꿈 + 아이템의 줄 순서를 반대로 배치
+```css
+.container {
+  display: flex;
+  flex-wrap: wrap;
+} /* 아이템이 컨테이너 너비를 초과하면 다음 줄로 이동! */
+```
+
+## 자식 요소(.item) 속성
+각 개별 아이템(flex items)에 적용하는 속성들!
+
+### flex-grow
+컨테이너의 남은 공간을 어떻게 나눌지 설정
+* 0 :	기본값 (남은 공간을 차지하지 않음)
+* 1 :	동일한 비율로 남은 공간을 나눠 가짐
+* 2 이상 :	비율을 설정하여 공간 차지
+```css
+.item:first-child {
+  flex-grow: 2; /* 첫 번째 아이템이 두 배 크기 */
+}
+.item {
+  flex-grow: 1;
+}
+```
+
+### flex-shrink
+공간이 부족할 때 크기가 줄어드는 비율
+* 0 :	크기를 줄이지 않음
+* 1 :	기본값 (동일한 비율로 축소)
+* 2 이상 :	더 많이 줄어듦
+```css
+.item:first-child {
+  flex-shrink: 2; /* 첫 번째 아이템이 두 배 더 줄어듦 */
+}
+```
+
+### flex-basis
+요소의 기본 크기를 지정
+* auto :	내용 크기에 따라 자동 설정
+* px, % :	고정 크기 지정
+```css
+.item {
+  flex-basis: 200px;
+}
+```
+
+### align-self 
+align-self는 개별 그리드(Grid) 또는 플렉스(Flexbox) 아이템의 세로 정렬을 조정하는 속성이야.
+
+> align-items가 컨테이너 내부의 모든 아이템을 정렬하는 반면,
+align-self는 특정 아이템 하나만 개별적으로 정렬 가능!
+
+* auto :	부모(align-items) 설정을 따름 (기본값)
+* flex-start :	위쪽 정렬
+* flex-end :	아래쪽 정렬
+* center :	세로 중앙 정렬
+* baseline :	텍스트 기준선에 맞춤
+* stretch :	컨테이너 높이에 맞게 늘어남 (기본값)
+
+```css
+.container {
+  display: flex;
+  align-items: center; /* 모든 아이템을 세로 중앙 정렬 */
+}
+.item:nth-child(2) {
+  align-self: flex-start; /* 두 번째 아이템만 위쪽 정렬 */
+}
+```
+
+### order
+아이템의 정렬 순서를 변경
+* 0 :	기본값 (HTML 순서대로)
+* 1, 2, 3 :	숫자가 클수록 뒤로 이동
+* -1 :	앞으로 이동
+```css
+.item:nth-child(2) {
+  order: -1; /* 두 번째 아이템을 맨 앞으로 이동 */
+}
+```
+
+
 
-* display: flex
-* flex-direction
-* justify-content
-* align-items
-* flex-wrap
-* flex-grow, flex-shrink, flex-basis
diff --git a/docs/07_리스트와 테이블.md b/docs/07_리스트와 테이블.md
new file mode 100644
index 0000000..184ce3d
--- /dev/null
+++ b/docs/07_리스트와 테이블.md	
@@ -0,0 +1,23 @@
+# 리스트와 테이블
+
+| 속성 | 설명 |
+|---|---|
+| list-style |  |
+| table-layout |  |
+| border-collapse |  |
+| caption-side |  |
+
+## 리스트
+
+* `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`
+
+
+# 테이블
+
+* table-layout
+* border-collapse
+* caption-side : top | bottom
+
diff --git a/docs/08_CSS Grid.md b/docs/08_CSS Grid.md
index 523f1b3..7c2c62d 100644
--- a/docs/08_CSS Grid.md	
+++ b/docs/08_CSS Grid.md	
@@ -1,6 +1,195 @@
 # CSS Grid
-* display: grid
-* grid-template-columns, grid-template-rows
-* grid-column-gap, grid-row-gap
-* grid-area, grid-auto-flow
-* align-content, justify-content
\ No newline at end of file
+CSS Grid는 웹 페이지 레이아웃을 만들기 위한 강력한 2D(행+열) 레이아웃 시스템이야.
+> Flexbox가 1차원(가로 또는 세로) 정렬을 위한 도구라면, Grid는 2차원(가로+세로) 정렬을 위한 도구
+
+| 컨테이너 속성 | 설명 | 옵션 |
+|---|---|---|
+| grid-template-columns | 열 개수 및 크기 설정 |
+| grid-template-rows | 행 개수 및 크기 설정 |
+| grid-gap | 그리드 간격 설정 | = row-gap + column-gap = gap | 
+| grid-auto-rows | 자동 크기 설정 |
+| grid-auto-columns | 자동 크기 설정 |
+| grid-auto-flow | 아이템 자동 배치 방향 |
+| grid-template-areas | 그리드 레이아웃을 시각적으로 구성 |
+| align-items |  |
+| justify-content |  |
+
+| 아이템 속성 | 설명 | 옵션 |
+|---|---|---|
+| grid-column | 열 영역 지정 | = grid-column-start + grid-column-end |
+| grid-row | 행 영역 지정 | = grid-row-start + grid-row-end |
+| grid-area | 그리드 영역 지정 |
+| align-self |  |
+
+
+## CSS Grid 개념 및 기본 구조
+CSS Grid는 grid container(부모)와 grid items(자식)으로 구성됨.
+```css
+.container {
+  display: grid;
+} /* 이렇게 하면 .container 안의 모든 요소(grid items)가 그리드 아이템으로 변함! */
+```
+
+## Grid 컨테이너 속성
+Grid 레이아웃을 설정하는 부모 요소의 속성들
+
+### grid-template-columns
+그리드의 열(가로) 개수와 크기를 정의!
+
+```css
+.container {
+  display: grid;
+  grid-template-columns: 200px 200px 200px;
+} /* 200px 크기의 열이 3개 생성됨! */
+```
+#### 반응형으로 자동 크기 조정
+fr 단위 사용
+```css
+.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+} /* 각 열이 동일한 너비(1fr = 1 fraction)로 자동 조정됨! */
+```
+
+### grid-template-rows
+그리드의 행(세로) 크기를 정의!
+```css
+.container {
+  display: grid;
+  grid-template-rows: 60px 1fr;
+}
+```
+
+### grid-gap = gap = row-gap + column-gap
+그리드 아이템 간의 간격을 조절!
+
+* row-gap : 행 간격
+* column-gap : 열 간격
+
+```css
+.container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px; /* 모든 열과 행 사이에 10px 간격 추가! */
+}
+```
+
+### grid-auto-rows / grid-auto-columns
+명시되지 않은 행 또는 열의 크기를 설정
+```css
+.container {
+  display: grid;
+  grid-template-columns: 200px 200px;
+  grid-auto-rows: 150px;
+} /* 설정된 열 개수보다 많은 아이템이 추가되면, 자동으로 150px 높이의 행이 생성됨! */
+```
+
+### grid-auto-flow
+그리드 아이템을 자동으로 배치하는 방향을 결정
+* row :	행 기준 자동 배치 (기본값)
+* column :	열 기준 자동 배치
+* dense :	빈 공간을 채우도록 자동 배치
+```css
+.container {
+  display: grid;
+  grid-auto-flow: column;
+} /* 아이템이 행이 아니라 열 방향으로 자동 배치됨! */
+```
+
+### grid-template-areas
+그리드 컨테이너에서 영역을 이름으로 정의하고, 자식 요소를 해당 영역에 배치할 수 있음!
+
+```css
+.container {
+  display: grid;
+  grid-template-columns: 200px 1fr;
+  grid-template-rows: 50px 1fr 50px;
+  grid-template-areas:
+    "header header"
+    "sidebar content"
+    "footer footer";
+}
+.header {
+  grid-area: header;
+}
+.sidebar {
+  grid-area: sidebar;
+}
+.content {
+  grid-area: content;
+}
+.footer {
+  grid-area: footer;
+}
+```
+
+## Grid 아이템 속성
+각 개별 아이템에 적용하는 속성들!
+
+### grid-column
+아이템이 차지할 열(column)의 시작과 끝을 지정
+```css
+.item {
+  grid-column: 1 / 3; /* 1번째 열에서 시작해서 3번째 열까지 차지 */
+}
+```
+#### 줄여서 작성 가능
+```css
+grid-column: span 2; /* 현재 위치에서 2칸 차지! */
+```
+### grid-row
+아이템이 차지할 행(row)의 시작과 끝을 지정
+```css
+.item {
+  grid-row: 2 / 4; /* 2번째 행에서 시작해서 4번째 행까지 차지 */
+}
+```
+### grid-area
+한 번에 행과 열을 설정할 수 있음! `grid-template-areas`에서 사용될 이름을 지정
+```css
+.item {
+  grid-area: 2 / 1 / 4 / 3; /* row-start / column-start / row-end / column-end */
+}
+```
+```css
+.header {
+  grid-area: header;
+}
+```
+
+### repeat(), minmax(), auto-fit, auto-fill
+복잡한 그리드 설정을 더 쉽게 만드는 기능들!
+#### repeat(n, 크기)
+반복 그리드 생성
+```css
+.container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+} /* 1fr 크기의 열을 3개 자동 생성! */
+```
+#### minmax(최소, 최대)
+```css
+.container {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(100px, 1fr));
+} /* 열 크기가 최소 100px, 최대 1fr로 자동 조정됨! */
+```
+#### auto-fill
+그리드 크기에 맞춰 최대한 많은 열 생성
+
+#### auto-fit
+아이템이 존재하는 열만 생성, 빈 공간 제거
+```css
+.container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+}
+```
+
+
+
+
+
+
+
+
diff --git a/docs/09_다단 레이아웃.md b/docs/09_다단 레이아웃.md
new file mode 100644
index 0000000..2b7433d
--- /dev/null
+++ b/docs/09_다단 레이아웃.md	
@@ -0,0 +1,99 @@
+# 멀티 컬럼(Multi-Column) 레이아웃
+CSS 멀티 컬럼(Multi-Column) 레이아웃은 텍스트를 신문이나 잡지처럼 여러 개의 컬럼으로 나누어 표시할 때 사용하는 기능이야.
+
+> 그리드(Grid)나 플렉스(Flexbox)와 달리, 주로 텍스트 콘텐츠를 정렬하는 데 최적화되어 있어!
+
+| 속성 | 설명 | 옵션 |
+|---|---|---|
+| column-count | 컬럼 개수 설정 | 
+| column-width | 컬럼 너비 설정 | 
+| column-gap | 컬럼 간격 조정 | 
+| column-rule | 컬럼 사이 구분선 | 
+| column-span | 컬럼 합치기 |  none, all |
+| column-fill | 컬럼 내용 배치 방식 | balance, auto |
+| break-inside | 컬럼 내 줄바꿈 제어 | auto, avoid |
+
+## 멀티 컬럼 기본 개념
+멀티 컬럼 레이아웃을 사용하면 컨텐츠를 자동으로 여러 개의 열(column)로 정렬할 수 있어.
+* column-count, column-width를 사용하여 컬럼을 설정!
+
+```css
+.container {
+  column-count: 3;
+  column-gap: 20px;
+} /* 내용이 3개의 컬럼으로 정렬되고, 컬럼 사이 간격은 20px! */
+```
+
+## 주요 속성
+
+### column-count
+내용을 몇 개의 컬럼으로 나눌지 설정
+```css
+.container {
+  column-count: 3;
+} /* 텍스트가 3개의 열로 나뉘어 표시됨! */
+```
+
+### column-width
+각 컬럼의 최소 너비를 설정, 자동으로 열 개수 조절
+```css
+.container {
+  column-count: 3;
+  column-width: 150px;
+} /* 최소 너비 150px을 유지하면서 3개의 컬럼을 생성하려고 시도! */
+```
+
+### column-gap
+각 컬럼 사이의 간격을 설정
+```css
+.container {
+  column-count: 3;
+  column-gap: 30px;
+}
+```
+
+### column-rule
+컬럼 사이에 구분선을 추가
+
+```css
+.container {
+  column-count: 3;
+  column-rule: 2px solid gray;
+}
+```
+#### column-rule-width / column-rule-style / column-rule-color
+
+### column-span
+특정 요소가 여러 개의 컬럼을 차지하도록 설정
+* none :	기본값 (컬럼 하나만 차지)
+* all :	모든 컬럼을 가로질러 확장
+```css
+h2 {
+  column-span: all;
+} /* 
 요소가 여러 컬럼을 가로질러 확장됨! */
+```
+
+### column-fill
+내용을 컬럼에 어떻게 배분할지 설정
+* balance :	모든 컬럼을 균등하게 채움 (기본값)
+* auto :	한 컬럼을 먼저 채우고 넘칠 경우 다음 컬럼으로 이동
+```css
+.container {
+  column-count: 3;
+  column-fill: auto;
+} /* 한 컬럼이 가득 차면 다음 컬럼으로 넘어감! */
+```
+
+### break-inside
+컬럼이 분할되는 부분에서 특정 요소가 잘리지 않도록 방지
+* auto :	기본값 (자동 줄바꿈 허용)
+* avoid :	컬럼이 나뉠 때 잘리지 않도록 방지
+```css
+h2 {
+  break-inside: avoid;
+} /* 
가 컬럼이 바뀌는 부분에서 분리되지 않도록 설정 */
+```
+
+
+
+
diff --git a/docs/09_애니메이션 및 트랜지션.md b/docs/09_애니메이션 및 트랜지션.md
deleted file mode 100644
index 34b8838..0000000
--- a/docs/09_애니메이션 및 트랜지션.md	
+++ /dev/null
@@ -1,6 +0,0 @@
-# 애니메이션 및 트랜지션
-* transition
-* animation
-* keyframes
-* transform
-* perspective
diff --git a/docs/10_애니메이션 및 트랜지션.md b/docs/10_애니메이션 및 트랜지션.md
new file mode 100644
index 0000000..6b58498
--- /dev/null
+++ b/docs/10_애니메이션 및 트랜지션.md	
@@ -0,0 +1,246 @@
+# 애니메이션 및 트랜지션
+
+| 속성 | 설명 |
+|---|---|
+| transition |  |
+| animation |  |
+| transform |  |
+| transform-style |  |
+| perspective |  |
+| perspective-origin |  |
+
+## 트랜지션(Transition)
+트랜지션은 상태가 변화할 때 애니메이션 효과를 추가하는 속성!
+예를 들어, 버튼 색상이 변할 때 자연스럽게 변화하도록 설정할 수 있어.
+
+### transition
+요소의 속성이 즉시 변경되지 않고 부드럽게 전환됨
+> hover, focus, active 같은 상태 변화에 자주 사용됨
+```css
+요소 {
+  transition: 속성 지속시간 타이밍함수 지연시간;
+}
+```
+* 속성 :	변화할 CSS 속성 (예: background-color, width, opacity)
+* 지속시간 :	변화가 지속될 시간 (s, ms 단위)
+* 타이밍 함수 :	변화 속도를 조절 (ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier())
+* 지연시간 :	효과가 시작되기까지의 대기 시간
+```css
+button {
+  background-color: blue;
+  color: white;
+  padding: 10px 20px;
+  transition: background-color 0.5s ease-in-out;
+}
+button:hover {
+  background-color: red;
+}
+/* 버튼에 마우스를 올리면 0.5초 동안 색상이 부드럽게 변함! */
+```
+#### transition-property
+트랜지션을 적용해야 하는 CSS 속성의 이름 혹은 이름들을 명시합니다. 여기에 나열한 속성만 트랜지션하는 동안 움직입니다.
+#### transition-duration
+트랜지션이 일어나는 지속 시간을 명시합니다. 트랜지션 동안 모든 속성에 적용하는 단일 지속 시간을 명시하거나, 다른 주기로 각 속성이 트랜지션하게 하는 여러 지속 시간을 명시할 수 있습니다.
+#### transition-timing-function
+속성의 중간값을 계산하는 방법을 정의하는 함수를 명시합니다. Timing functions는 트랜지션의 중간값을 계산하는 방법을 결정합니다.
+* ease | linear | step-end | steps(4, end)
+#### transition-delay
+속성이 변한 시점과 트랜지션이 실제로 시작하는 사이에 기다리는 시간을 정의합니다.
+
+#### 여러 속성에 트랜지션 적용
+```css
+.box {
+  width: 100px;
+  height: 100px;
+  background-color: blue;
+  transition: width 0.5s, height 0.5s, background-color 0.5s;
+}
+.box:hover {
+  width: 200px;
+  height: 200px;
+  background-color: red;
+}
+/* 마우스를 올리면 크기와 색상이 동시에 변화! */
+```
+> all을 사용하면 모든 속성에 적용 가능
+> ```css
+> transition: all 0.5s ease-in-out;
+> ```
+> 하지만 all은 성능에 영향을 줄 수 있으므로 필요한 속성만 지정하는 게 좋아!
+
+#### cubic-bezier()로 커스텀 트랜지션 설정
+```css
+.box {
+  transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1);
+}
+```
+#### 트랜지션 완료 이벤트
+```javascript
+element.addEventListener('transitionend', function(event){
+    console.log(event.propertyName);
+    console.log(event.elapsedTime);
+}, true);
+```
+
+## 애니메이션(Animation)
+애니메이션은 요소의 스타일이 여러 단계로 변하면서 부드럽게 움직이는 효과를 줄 때 사용!
+> 트랜지션은 한 번만 실행되지만, 애니메이션은 반복 실행 가능!
+
+### @keyframes
+애니메이션의 각 단계를 설정할 수 있음
+* from, to 또는 %를 사용하여 여러 단계 지정 가능
+```css
+@keyframes 애니메이션이름 {
+  from {
+    속성: 값;
+  }
+  to {
+    속성: 값;
+  }
+}
+```
+> from은 0%, to는 100%와 동일!
+
+### animation
+```css
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.box {
+  animation: fadeIn 2s ease-in-out;
+}
+/* 2초 동안 투명도(opacity)가 0에서1로 변경됨! */
+```
+
+#### 여러 단계 애니메이션 설정
+```css
+@keyframes slide {
+  0% {
+    transform: translateX(0);
+  }
+  50% {
+    transform: translateX(50px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+.box {
+  animation: slide 3s infinite;
+}
+/* 애니메이션이 왼쪽에서 오른쪽으로 갔다가 다시 돌아옴! */
+```
+
+#### animation-name
+적용할 애니메이션 이름 
+* @keyframes에서 지정
+#### animation-duration 
+실행 시간 
+* s, ms 단위
+#### animation-timing-function 
+속도 곡선 
+* ease, linear, ease-in, ease-out
+#### animation-delay 
+지연 시간 (시작 전 대기)
+#### animation-iteration-count	
+반복 횟수 
+* infinite 사용 가능
+#### animation-direction 
+애니메이션 방향 
+* normal :	처음부터 끝까지 정상 실행 (기본값)
+* reverse :	끝에서 시작으로 거꾸로 실행
+* alternate :	처음 → 끝 → 처음 반복
+* alternate-reverse	 :끝 → 처음 → 끝 반복
+#### animation-fill-mode
+애니메이션 종료 후 상태. 시작 전/끝난 후 스타일 유지 
+* none :	애니메이션 종료 후 원래 상태로 돌아감 (기본값)
+* forwards :	마지막 상태를 유지
+* backwards :	애니메이션 시작 전 첫 번째 프레임 유지
+* both :	forwards + backwards 효과
+
+
+```css
+@keyframes bounce {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-30px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+.box {
+  animation: bounce 1s infinite alternate ease-in-out;
+}
+```
+
+## transform
+transform 속성은 요소를 이동(translate), 회전(rotate), 확대/축소(scale), 기울이기(skew) 등의 변형을 적용하는 데 사용돼.
+
+* translate(x, y)
+* rotate(deg)
+* scale(x, y)
+* skew(x, y)
+* rotateX(deg)
+* rotateY(deg)
+* rotateZ(deg)
+* translate3d(x, y, z)
+* scale3d(x, y, z)
+
+### 여러 변형을 한 번에 적용 가능
+```css
+.box {
+  transform: translate(50px, 20px) rotate(30deg) scale(1.2);
+} /* 이동 + 회전 + 확대를 한 번에 적용 가능! */
+```
+> 여러 개의 transform을 조합할 때는 순서가 중요해!
+
+## transform-style
+부모 요소의 3D 변환을 자식 요소에도 적용할지 결정!
+> `transform-style: preserve-3d;`을 사용하면 자식 요소도 3D 공간에 배치됨.
+```css
+.container {
+  perspective: 500px;
+  transform-style: preserve-3d;
+}
+.box {
+  transform: rotateY(45deg);
+}
+/* 부모 요소의 원근 효과가 자식 요소에도 적용됨! */
+```
+> 기본값은 flat (자식 요소는 2D로 표시됨)
+
+## perspective
+perspective 속성은 3D 효과를 만들기 위해 원근감을 설정하는 데 사용돼.
+> 요소가 멀리 있으면 작아지고, 가까이 있으면 커지도록 설정 가능!
+
+* 카메라와 요소 사이의 거리를 조절
+* 값이 작을수록 원근감이 강해지고, 값이 클수록 원근감이 약해짐
+
+```css
+.container {
+  perspective: 500px;
+}
+.box {
+  transform: rotateY(45deg);
+}
+/* 원근감 적용 후, Y축 45도 회전! */
+```
+
+## perspective-origin
+원근 효과의 기준점을 이동
+* 기본값: 50% 50% (정중앙)
+```css
+.container {
+  perspective: 600px;
+  perspective-origin: left top;
+} /* 왼쪽 상단을 기준으로 원근 효과 적용! */
+```
+
diff --git a/docs/11_CSS 변수.md b/docs/11_CSS 변수.md
index e4e5e93..9b77013 100644
--- a/docs/11_CSS 변수.md	
+++ b/docs/11_CSS 변수.md	
@@ -1,4 +1,101 @@
-# CSS 변수 :root
+# CSS 변수 (Custom Properties)
+
+CSS 변수(커스텀 프로퍼티)는 재사용 가능한 값을 저장하고 활용할 수 있는 기능이야.
+반복되는 색상, 크기, 간격 등을 변수로 선언하면 유지보수가 쉬워져!
+
+CSS 변수는 `--`(대시 두 개)로 시작하는 이름을 사용해 정의해.
+`var(--변수이름)` 형식으로 값을 가져올 수 있어!
+
+```css
+:root {
+  --main-color: blue;
+  --font-size: 18px;
+}
+p {
+  color: var(--main-color);
+  font-size: var(--font-size);
+}
+/* --main-color 변수에 저장된 값을 가져와서 텍스트 색상으로 사용! */
+```
+
+## CSS 변수 선언 및 사용법
+
+### :root에서 전역 변수 선언
+:root를 사용하면 모든 요소에서 변수 사용 가능!
+```css
+:root {
+  --primary-color: #3498db;
+  --secondary-color: #2ecc71;
+  --text-color: #333;
+}
+```
+### 특정 요소에서 로컬 변수 선언
+특정 요소 안에서만 변수 적용 가능!
+```css
+.card {
+  --card-bg: lightgray; /* 이 변수는 .card 내부에서만 사용 가능! */
+  background-color: var(--card-bg);
+}
+```
+
+### var(--변수명)으로 변수 사용
+```css
+h1 {
+  color: var(--primary-color);
+}
+p {
+  color: var(--text-color);
+}
+```
+
+## CSS 변수의 장점
+* 재사용 가능 :	여러 곳에서 동일한 스타일을 적용 가능
+* 유지보수 쉬움 :	변수 값만 변경하면 전체 스타일 수정 가능
+* 반응형 디자인 활용 가능 :	calc(), media query와 함께 사용 가능
 
 
-## 다크 모드 적용법
\ No newline at end of file
+
+
+## 예시
+### 다크 모드
+```css
+:root {
+  --bg-color: white;
+  --text-color: black;
+}
+
+.dark-mode {
+  --bg-color: black;
+  --text-color: white;
+}
+
+body {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+}
+/* .dark-mode 클래스를 추가하면 다크 모드 자동 적용! */
+```
+### 반응형 디자인
+```css
+:root {
+  --font-size: 16px;
+}
+@media (max-width: 768px) {
+  :root {
+    --font-size: 14px;
+  }
+}
+p {
+  font-size: var(--font-size);
+}
+/* 화면 크기에 따라 자동으로 폰트 크기 조절! */
+```
+### calc()와 함께 사용
+```css
+:root {
+  --base-size: 10px;
+}
+.box {
+  width: calc(var(--base-size) * 5); /* 50px */
+}
+```
diff --git a/docs/12_CSS 함수.md b/docs/12_CSS 함수.md
new file mode 100644
index 0000000..fa0f852
--- /dev/null
+++ b/docs/12_CSS 함수.md	
@@ -0,0 +1,182 @@
+# CSS 함수(Function)
+
+CSS에서는 값을 동적으로 계산하거나 조작할 수 있는 다양한 함수를 제공해.
+색상, 크기, 위치, 애니메이션, 변형(Transform) 등을 다룰 때 유용해!
+
+## 수학 관련 함수 (Math Functions)
+
+### calc()
+calc() 함수는 다양한 단위를 혼합하여 연산할 수 있는 함수야.
+
+* +, -, *, / 연산 가능
+* 픽셀(px), 백분율(%), em, rem 등 서로 다른 단위도 조합 가능!
+* 동적으로 크기를 계산할 때 매우 유용!
+
+```css
+.box {
+  width: calc(100% - 50px); /* 부모 너비에서 50px 빼기 */
+  height: calc(50vh + 20px); /* 화면 높이의 50% + 20px */
+}
+```
+
+### min()
+여러 값 중 가장 작은 값 선택
+
+* `min(a, b, c, ...)`
+
+```css
+.box {
+  width: min(500px, 80%); /* 500px과 80% 중 작은 값 적용 */
+} /* 너비가 80%를 넘지 않도록 제한 가능! */
+```
+
+### max()
+여러 값 중 가장 큰 값 선택
+
+* `max(a, b, c, ...)`
+
+```css
+.box {
+  width: max(300px, 50%); /* 300px과 50% 중 큰 값 적용 */
+} /* 너비가 최소 300px 이상 유지되도록 설정 가능! */
+```
+### clamp()
+값이 특정 범위를 벗어나지 않도록 제한
+
+* `clamp(최소값, 기본값, 최대값)`
+
+```css
+p {
+  font-size: clamp(12px, 2vw, 24px);
+} /* 기본적으로 2vw(화면 너비 2%)를 적용하지만, 최소 12px, 최대 24px로 제한! */
+```
+
+## 색상 관련 함수 (Color Functions)
+### rgb() / rgba()
+* `rgb(r, g, b)` : RGB 색상 지정
+* `rgba(r, g, b, a)` : 투명도(A: 0~1) 추가
+
+```css
+h1 {
+  color: rgb(255, 0, 0); /* 빨강 */
+}
+p {
+  color: rgba(0, 0, 255, 0.5); /* 반투명 파랑 */
+}
+```
+
+### hsl() / hsla()
+HSL 방식은 색상을 직관적으로 조절할 때 유용해!
+* `hsl(hue, saturation, lightness)` : 색상, 채도, 밝기로 색상 지정
+* `hsla(hue, saturation, lightness, alpha)` : 투명도 추가
+
+```css
+h1 {
+  color: hsl(120, 100%, 50%); /* 초록색 */
+}
+p {
+  color: hsla(240, 100%, 50%, 0.7); /* 반투명 파랑 */
+}
+```
+
+### currentColor
+currentColor는 현재 요소의 color 값을 자동으로 상속받음
+```css
+h1 {
+  color: blue;
+  border: 2px solid currentColor;
+} /* 텍스트 색상이 파란색이면, 테두리도 자동으로 파란색이 됨! */
+```
+
+## 변형(Transform) 관련 함수
+CSS에서 요소를 변형할 때 사용되는 함수들!
+
+### translate(x, y)
+* x, y 방향으로 요소를 이동
+* %, px, vw 등의 단위 사용 가능
+
+```css
+.box {
+  transform: translate(50px, 20px);
+  /* 가로 50px, 세로 20px 이동! */
+}
+```
+### rotate(deg)
+요소를 각도(deg) 만큼 회전
+```css
+.box {
+  transform: rotate(45deg); /*  45도 회전! */
+}
+```
+
+### scale(x, y)
+요소의 크기를 확대/축소
+* 1은 원래 크기, 0.5는 절반 크기
+```css
+.box {
+  transform: scale(1.5, 2); /* 가로 1.5배, 세로 2배 확대! */
+}
+```
+
+### skew(x, y)
+요소를 x, y 방향으로 기울이기
+```css
+.box {
+  transform: skew(20deg, 10deg); /* 가로 20도, 세로 10도 기울이기! */
+}
+```
+
+### rotateX(deg)
+```css
+.box { /* X축 기준으로 45도 회전! */
+  transform: rotateX(45deg);
+}
+```
+### rotateY(deg)
+```css
+.box { /* Y축 기준으로 60도 회전! */
+  transform: rotateY(60deg);
+}
+```
+### rotateZ(deg)
+```css
+.box { /* Z축 기준으로 30도 회전! */
+  transform: rotateZ(30deg);
+}
+```
+### translate3d(x, y, z)
+```css
+.box {
+  transform: translate3d(50px, 20px, 100px);
+}
+```
+### scale3d(x, y, z)
+```css
+.box {
+  transform: scale3d(1.5, 1.5, 1.5);
+}
+```
+
+
+
+## 애니메이션 관련 함수
+
+### cubic-bezier()
+애니메이션 속도를 조절하는 베지어 곡선
+```css
+.box {
+  transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1);
+}
+```
+
+### steps()
+애니메이션을 부드럽게 하지 않고 계단식으로 나눠 실행
+```css
+.loading {
+  animation: blink 1s steps(5, end) infinite;
+  /* 5단계로 깜빡이는 애니메이션! */
+}
+```
+
+
+
diff --git a/docs/12_미디어퀴리.md b/docs/12_미디어퀴리.md
deleted file mode 100644
index ef08653..0000000
--- a/docs/12_미디어퀴리.md
+++ /dev/null
@@ -1 +0,0 @@
-# 미디어 쿼리 @media
diff --git a/docs/13_미디어퀴리.md b/docs/13_미디어퀴리.md
new file mode 100644
index 0000000..5ae9952
--- /dev/null
+++ b/docs/13_미디어퀴리.md
@@ -0,0 +1,159 @@
+# 미디어 쿼리 @media
+
+미디어쿼리는 화면 크기, 해상도, 디바이스 종류 등에 따라 CSS 스타일을 다르게 적용하는 방법이야.
+즉, 하나의 CSS 파일로 여러 디바이스에 최적화된 웹페이지를 만들 수 있어!
+```css
+@media (조건) {
+  /* 조건을 만족할 때 적용할 스타일 */
+}
+```
+
+## 특정 화면 크기에서 스타일 적용
+```css
+@media (max-width: 768px) { 
+    /* 화면 너비가 768px 이하일 때 배경색 변경! */
+  body {
+    background-color: lightgray;
+  }
+}
+```
+* `max-width: 768px` :	768px 이하(모바일, 태블릿)에 적용
+* `min-width: 1024px` :	1024px 이상(PC)에 적용
+
+### 여러 개의 조건을 지정하기
+and, or, not 연산자를 사용할 수 있어!
+```css
+@media (min-width: 600px) and (max-width: 1024px) {
+    /* 화면 너비가 600px ~ 1024px 사이일 때 적용! */
+  body {
+    background-color: lightblue;
+  }
+}
+```
+```css
+@media (max-width: 480px), (min-width: 1200px) {
+    /* 화면 너비가 480px 이하이거나 1200px 이상이면 적용! */
+  body {
+    background-color: pink;
+  }
+}
+```
+```css
+@media not screen and (max-width: 768px) {
+    /* 768px 이하가 아닌 경우(즉, 769px 이상)일 때 적용! */
+  body {
+    background-color: yellow;
+  }
+}
+```
+
+## 미디어 타입(Media Types)
+미디어쿼리는 출력 장치(디바이스 종류)에 따라 스타일을 다르게 적용할 수도 있어!
+@media 뒤에 미디어 타입을 지정하면 특정 장치에서만 적용 가능
+* all :	모든 장치 (기본값)
+* screen :	컴퓨터, 태블릿, 모바일 화면 (일반적인 CSS 적용 대상)
+* print :	프린터 출력 스타일 적용
+* speech :	화면 낭독기(Screen Reader)용 스타일 적용
+
+```css
+body {
+  background-color: lightgray; /* 웹에서는 연한 회색 */
+}
+@media print {
+  body {
+    background-color: white; /* 프린트에서는 흰색 */
+  }
+}
+```
+
+## 반응형 웹 디자인
+### 기기별 화면 크기에 맞게 스타일 조정
+```css
+/* 모바일 (최대 480px) */
+@media (max-width: 480px) {
+  body {
+    background-color: lightblue;
+  }
+}
+
+/* 태블릿 (481px ~ 1024px) */
+@media (min-width: 481px) and (max-width: 1024px) {
+  body {
+    background-color: lightgreen;
+  }
+}
+
+/* 데스크톱 (1025px 이상) */
+@media (min-width: 1025px) {
+  body {
+    background-color: lightcoral;
+  }
+}
+```
+### 네비게이션 메뉴를 반응형으로 만들기
+```css
+.nav {
+  display: flex;
+  justify-content: space-between;
+}
+
+@media (max-width: 768px) {
+  .nav {
+    flex-direction: column; /* 모바일에서는 세로 메뉴 */
+  }
+}
+```
+
+## 고급 미디어쿼리 활용
+### orientation
+디바이스가 가로/세로 모드인지 감지할 수 있음!
+```css
+@media (orientation: portrait) {
+  body {
+    background-color: lightblue;
+  }
+}
+@media (orientation: landscape) {
+  body {
+    background-color: lightcoral;
+  }
+}
+/* 세로 모드에서는 파란색, 가로 모드에서는 빨간색 배경 적용! */
+```
+### aspect-ratio
+화면 비율(예: 16:9, 4:3 등)에 따라 스타일 적용 가능!
+```css
+@media (min-aspect-ratio: 16/9) {
+  body {
+    background-color: gold;
+  }
+}
+/* 화면 비율이 16:9 이상이면 배경색 변경! */
+```
+### hover
+터치스크린(모바일)에서는 hover 효과 제거 가능!
+```css
+@media (hover: hover) {
+  button:hover {
+    background-color: red;
+  }
+}
+
+@media (hover: none) {
+  button {
+    background-color: gray;
+  }
+}
+/* 마우스가 없는 터치스크린에서는 기본 회색 버튼! */
+```
+### prefers-color-scheme
+사용자가 다크 모드를 설정했을 때 자동 변경 가능!
+```css
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: black;
+    color: white;
+  }
+}
+/* 사용자의 시스템 설정에 따라 자동으로 다크 모드 적용! */
+```
diff --git a/docs/14_스크롤 스냅.md b/docs/14_스크롤 스냅.md
new file mode 100644
index 0000000..1c2fb36
--- /dev/null
+++ b/docs/14_스크롤 스냅.md	
@@ -0,0 +1,10 @@
+# Scroll Snap
+
+| 속성 | 설명 |
+|---|---|
+
+* `scroll-snap-type`
+* `scroll-snap-align`
+* `scroll-snap-stop`
+* `scroll-margin`
+* `scroll-padding`
\ No newline at end of file
diff --git a/docs/15_폼.md b/docs/15_폼.md
new file mode 100644
index 0000000..758a08a
--- /dev/null
+++ b/docs/15_폼.md
@@ -0,0 +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`
\ No newline at end of file
diff --git a/docs/16_이미지.md b/docs/16_이미지.md
new file mode 100644
index 0000000..29fc8a9
--- /dev/null
+++ b/docs/16_이미지.md
@@ -0,0 +1,10 @@
+# Styling Image and Media
+
+* `width`
+* `height`
+* `min-width`, `min-height`
+* `max-width`, `max-height`
+* `object-fit` : fill | contain | cover | none | scale-down
+* `object-position`
+
+
diff --git a/docs/21_반응형 레이아웃.md b/docs/21_반응형 레이아웃.md
new file mode 100644
index 0000000..0b65b12
--- /dev/null
+++ b/docs/21_반응형 레이아웃.md	
@@ -0,0 +1,6 @@
+# 반응형 레이아웃
+
+
+```html
+
+```
\ No newline at end of file