2025-02-03T19:29:18

2025-02-03 19:29:18 +09:00
parent 7936270d10
commit 3d9e93ae42
9 changed files with 545 additions and 101 deletions
--- a/docs/03_박스
+++ b/docs/03_박스
@@ -53,7 +53,6 @@ CSS 박스 모델은 4개의 영역으로 구성돼.
 | min-width / min-height | 요소의 최소 크기 지정 | none, inherit |
 | border-radius | 요소의 모서리를 둥글게 만듦 | |
 | box-shadow | 요소의 그림자 효과 설정 | |
-| outline | 요소의 외곽선 | |

 ### width / height

@@ -230,17 +229,4 @@ box-shadow: [x-offset] [y-offset] [blur-radius] [spread-radius] [color] [inset];
 }
 ```

-## 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을 사용하면 윤곽선과 요소 사이의 간격을 조절할 수 있어.
-

--- a/docs/05_배경
+++ b/docs/05_배경
@@ -14,6 +14,15 @@
 }
 ```

+| 속성 | 설명 | 옵션 |
+|---|---|---|
+| background-image | 배경에 이미지 추가 | url('image.jpg'), none |
+| background-size | 배경 이미지 크기 조정 | auto, cover, contain, px, % |
+| background-position | 배경 이미지 위치 지정 | left top, center center, right bottom, % |
+| background-repeat | 배경 이미지 반복 설정 | repeat, no-repeat, repeat-x, repeat-y | 
+| background-attachment | 배경 이미지 스크롤 여부 | scroll, fixed, local |
+| background-blend-mode | 배경과 이미지 혼합 모드 | normal, multiply, overlay, screen | 
+
 ### background-color
 요소의 배경 색을 지정
 * 색상 값: red, #ff0000, rgb(255, 0, 0), rgba(255, 0, 0, 0.5), transparent 등
@@ -108,6 +117,8 @@
  background-origin: content-box;
 }
 ```
+### background-blend-mode
+* normal, multiply, overlay, screen

 ## color
 글자 색상을 지정
--- a/docs/06_글꼴
+++ b/docs/06_글꼴
@@ -1,18 +1,29 @@
 # 글꼴 및 텍스트 스타일
 웹페이지에서 텍스트를 멋지게 스타일링하려면 글꼴(Font)과 텍스트(Text) 관련 CSS 속성을 잘 활용해야 해!

-| 속성 | 설명 |
-|---|---|
-| font |  |
-| text-align |  |
-| text-decoration |  |
-| text-shadow |  |
-| text-transform |  |
-| text-indent |  |
-| letter-spacing |  |
-| word-spacing |  |
-| line-height |  |
-| white-space |  |
+| 속성 | 설명 | 옵션 |
+|---|---|---|
+| font-family | 글꼴 지정 | sans-serif, monospace, serif |
+| font-size | 글자 크기 지정 |
+| font-weight | 글자 두께 조정 | normal, bold, lighter, bolder |
+| font-style | 글자의 스타일 | normal, italic, oblique |
+| text-align | 텍스트 정렬 방식 | left, right, center, justify |
+| text-decoration | 텍스트에 밑줄, 취소선 등의 효과 적용 | none, underline, overline, line-through |
+| text-orientation | 세로 텍스트 방향 설정 | mixed, upright, sideways | 
+| text-shadow | 텍스트에 그림자 효과 추가 | x-offset y-offset blur color |
+| text-transform | 텍스트의 대소문자 변환 | none, uppercase, lowercase, capitalize |
+| text-indent | 문단의 첫 줄 들여쓰기 설정 |
+| text-overflow | 내용이 넘칠 때 표시 방법 설정 | clip, ellipsis |
+| line-height | 줄 간격(행간) 조정 | normal |
+| white-space | 공백과 줄바꿈 처리 방식 | normal, nowrap, pre, pre-wrap, pre-line |
+| word-wrap | 긴 단어가 요소를 벗어날 경우 줄바꿈 처리 방식 | normal, break-word |
+| word-break | 단어를 어디서 끊을지 결정 | normal, break-all, keep-all | 
+| line-break | 줄바꿈 규칙 설정 | auto, loose, normal, strict | 
+| hypens | 긴 단어를 하이픈(-)으로 나눌지 여부 | none, manual, auto |
+| letter-spacing | 글자 간 간격 조정 | normal |
+| word-spacing | 단어 간 간격 조정 | normal |
+| direction | 텍스트 방향 지정 (RTL 언어 지원) | ltr, rtl |
+| writing-mode | 글자 쓰기 방향 지정 (가로/세로) | horizontal-tb, vertical-rl, vertical-lr |

 ## font
 font 속성을 사용하면 font-style, font-variant, font-weight, font-size, font-family를 한 줄로 설정할 수 있음.
@@ -24,7 +35,6 @@ p {

 font- 접두어가 붙은 속성들은 글꼴 스타일을 지정하는 역할을 해. 글자 크기, 두께, 스타일, 종류 등을 설정할 수 있어!

-
 ### font-family
 텍스트의 글꼴을 설정하는 속성. 여러 개의 글꼴을 쉼표(,)로 나열할 수 있음!
 > 브라우저에 없는 글꼴은 적용되지 않으므로, 백업용 폰트도 설정하는 게 좋음!
@@ -57,6 +67,8 @@ h1 {
 > em은 부모 요소의 크기를 기준으로 하고, rem은 `<html>` 요소를 기준으로 함.

 #### font-size-adjust
+x-height(소문자 높이)를 기준으로 글꼴 크기를 조정하여, 폰트가 변경되었을 때 가독성을 유지
+* none, 0 ~ 1 사이 값 사용

 ### font-weight
 글자의 굵기를 설정하는 속성
@@ -98,10 +110,21 @@ p {
 #### 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
+폰트의 너비를 조정하여 가로로 압축 또는 확장 가능
+* normal(기본값), condensed, expanded, ultra-condensed, ultra-expanded

-## text-align
+### font-kerning
+글자 간의 간격을 폰트에 내장된 커닝 정보에 따라 조정하여 가독성을 높임
+* auto(기본값), normal, none
+
+### font-feature-settings
+OpenType 폰트의 특정 기능을 활성화
+* liga : 자동 문자 연결
+* smcp : 작은 대문자 사용
+
+## 텍스트 정렬 및 스타일
+
+### text-align
 텍스트의 정렬 방식을 지정하는 속성
 * 값: left, right, center, justify
 ```css
@@ -115,9 +138,11 @@ p { /* 텍스트가 좌우 균형을 맞춰 정렬됨 */
 }
 ```

-## text-align-last
+#### text-align-last
+문단의 마지막 줄을 어떻게 정렬할지 결정
+* auto(기본값), left, right, center, justify

-## text-decoration 
+### text-decoration 
 텍스트에 밑줄, 취소선 등을 추가할 때 사용
 * none :	기본값 (장식 없음)
 * underline :	밑줄
@@ -129,21 +154,29 @@ p {
  text-decoration: underline line-through;
 }
 ```
-### text-decoration-line
+#### text-decoration-line
 * none, underline, overline, line-through
-### text-decoration-style
+#### text-decoration-style
 * solid, double, dotted, dashed, wavy
-### text-decoration-color 
+#### text-decoration-color 

-### text-underline-position
-### text-rendering
+#### text-underline-position
+밑줄 위치를 조정
+* auto(기본값), under, left, right

-## text-orientation
+#### text-rendering
+텍스트 렌더링 최적화
+* auto(기본값), optimizeSpeed, optimizeLegibility, geometricPrecision

-## text-shadow
+### text-orientation
+세로쓰기(`writing-mode: vertical-rl;`)에서 텍스트 방향 지정
+* mixed(기본값), upright, sideways
+> (upright → 문자 회전 X, sideways → 문자 회전 O)
+
+### text-shadow
 그림자의 수평 오프셋, 수직 오프셋, 흐림 반경, 색상을 순서대로 지정합니다. 쉼표로 구분된 여러 그림자 값을 포함하여 동일한 텍스트에 여러 그림자를 적용할 수 있습니다.

-## text-transform 
+### text-transform 
 텍스트를 자동으로 대문자, 소문자로 변환
 * uppercase :	모두 대문자 변환
 * lowercase :	모두 소문자 변환
@@ -154,7 +187,7 @@ p { /* 텍스트를 모두 대문자로 변환 */
 }
 ```

-## text-indent
+### text-indent
 문단의 첫 줄을 들여쓰기 할 때 사용하는 속성
 ```css
 p {
@@ -169,9 +202,11 @@ p {
 ```
 > 모든 줄을 들여쓰기 하려면 margin-left 사용!

-## text-overflow
+### text-overflow
+텍스트가 박스를 벗어날 경우 clip(잘라내기) 또는 ellipsis(... 말줄임표 표시) 적용
+* clip, ellipsis

-## letter-spacing
+### letter-spacing
 글자 사이의 간격을 조절
 ```css
 p {
@@ -179,7 +214,7 @@ p {
 }
 ```

-## word-spacing
+### word-spacing
 단어 사이의 간격을 조절
 ```css
 p {
@@ -187,7 +222,7 @@ p {
 }
 ```

-## line-height
+### line-height
 줄 간격을 조절
 ```css
 p { /* 줄 간격을 1.5배로 조절 */
@@ -195,7 +230,8 @@ p { /* 줄 간격을 1.5배로 조절 */
 }
 ```

-## white-space
+## 줄바꿈 및 방향 관련 속성
+### white-space
 공백, 줄바꿈, 자동 줄바꿈(줄바꿈 방지) 등을 설정하는 속성
 * normal : 여러 개의 공백을 하나로 줄이고, 텍스트가 넘치면 자동 줄바꿈됨!
 * nowrap : 줄바꿈 없이 한 줄로 표시됨!
@@ -212,22 +248,28 @@ p {
 }
 ```

-## line-break
+### line-break
+일본어, 중국어 등에서 줄바꿈 규칙을 적용
+* auto(기본값), loose, normal, strict

-## word-break
+### word-break
 텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀 지 지정
-* normal | break-all | keep-all | break-word
+* normal, break-all, keep-all, break-word

-## word-wrap = overflow-wrap
-어떤 문자가 내용 칸 밖으로 넘치지 않게 브라우저가 단어 마디 안에 줄을 바꿔야 할 것인지 아닌지를 정할 때 사용
-* normal | break-word
+### word-wrap = overflow-wrap
+긴 단어가 박스를 넘칠 경우 자동 줄바꿈 가능
+* normal, break-word

-## direction
+### direction
+텍스트의 읽기 방향 설정
+* ltr(왼쪽→오른쪽, 기본값), rtl(오른쪽→왼쪽)

-## hypens
+### hypens
+긴 단어를 하이픈(-)으로 자동 줄바꿈
+* none(기본값), manual, auto

-## writing-mode
-글 쓰기 방향
-* horizontal-tb | vertical-rl | vertical-lr
+### writing-mode
+텍스트 쓰기 방향을 결정
+* horizontal-tb(기본값), vertical-rl, vertical-lr

 쓰기 모드를 전환하면, 블록 (block) 방향과 인라인 (inline) 방향을 변경합니다. 블록 크기는 항상 쓰기 모드에서 페이지에 표시되는 방향 블록입니다. 인라인 크기는 항상 문장이 표시되는 방향입니다.
--- a/docs/07_리스트와
+++ b/docs/07_리스트와
@@ -1,23 +1,141 @@
 # 리스트와 테이블

-| 속성 | 설명 |
+| 속성 | 설명 | 옵션 |
 |---|---|
-| list-style |  |
-| table-layout |  |
-| border-collapse |  |
-| caption-side |  |
+| list-style | 리스트 스타일 한 번에 설정 |
+| table-layout | 테이블 크기 조정 방식 | auto, fixed |
+| border-collapse | 테두리 합치기 | separate, collapse |
+| border-spacing | 셀 간 간격 |
+| caption-side | 표 제목 위치 | top, bottom |
+| empty-cells | 빈 셀 표시 여부 | show, hide |
+| vertical-align | 셀 내 텍스트 정렬 | top, middle, bottom |

-## 리스트
+## 리스트 관련 속성 (List Properties)
+리스트(ul, ol, li) 스타일을 조정할 때 사용되는 속성들!

-* `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`
+### list-style
+리스트 스타일 한 번에 설정
+```css
+list-style: [list-style-type] [list-style-position] [list-style-image];
+```
+```css
+ul {
+  list-style: square inside url('icon.png');
+} /* 리스트 기호를 square로 변경하고, 내부 정렬(inside) 적용, 아이콘 추가! */
+```

+#### list-style-type
+리스트 기호 변경
+* none :	목록 기호 없음
+* disc :	● (기본값)
+* circle :	○ (빈 원)
+* square :	■ (사각형)
+* decimal :	1, 2, 3, ...
+* lower-roman :	i, ii, iii, iv, ...
+* upper-roman :	I, II, III, IV, ...
+* lower-alpha :	a, b, c, d, ...
+* upper-alpha :	A, B, C, D, ...
+* cjk-decimal, decimal-leading-zero, lower-greek, lower-latin, upper-latin, korean-hangul-formal, korean-hanja-formal 등

-# 테이블
+```css
+ul {
+  list-style-type: square;
+}
+ol {
+  list-style-type: upper-roman;
+}
+/* ul은 ■ 사각형 불릿 적용, ol은 로마 숫자로 표시! */
+```

-* table-layout
-* border-collapse
-* caption-side : top | bottom
+#### list-style-position
+리스트 기호 위치
+* outside :	기본값, 텍스트보다 왼쪽 바깥에 기호 표시
+* inside :	텍스트 안쪽에 기호 포함 (들여쓰기)
+```css
+ul {
+  list-style-position: inside;
+} /* 리스트 기호가 내부에 포함됨! */
+```
+
+#### list-style-image
+기본 리스트 기호 대신 이미지를 불릿으로 사용
+```css
+ul {
+  list-style-image: url('bullet.png');
+} /* 리스트 기호 대신 이미지(bullet.png) 사용 */
+```
+
+### 리스트 기호 스타일 (::marker)
+`::marker`를 사용해서 리스트의 기호 색상 및 스타일 변경 가능
+
+```css
+li::marker {
+  color: red;
+  font-size: 1.5em;
+}
+```
+
+## 테이블 관련 속성 (Table Properties)
+테이블(table, tr, td, th)의 스타일을 조정할 때 사용되는 속성들!
+
+### table-layout
+테이블의 레이아웃을 어떻게 설정할지 결정
+* auto :	기본값, 내용 크기에 따라 셀 크기가 자동 조정됨
+* fixed :	모든 열의 너비를 고정, 첫 번째 행의 너비를 기준으로 전체 조정
+```css
+table {
+  table-layout: fixed;
+} /* 셀 크기가 일정하게 고정됨! */
+```
+
+### border-collapse
+테이블의 셀 테두리를 개별적으로 표시할지(separate), 합칠지(collapse) 결정
+* separate :	기본값, 각 셀의 테두리가 개별적으로 표시됨
+* collapse :	인접한 셀의 테두리를 합쳐서 하나로 표시
+```css
+table {
+  border-collapse: collapse;
+} /* 모든 셀의 테두리가 하나로 합쳐짐! */
+```
+
+### border-spacing
+행(row)과 열(column) 사이 간격 조절
+* `border-collapse: separate;`일 때만 적용됨
+```css
+table {
+  border-spacing: 10px 5px; /* 가로 10px, 세로 5px 간격 */
+} /* 셀 간의 가로 10px, 세로 5px 간격 설정! */
+```
+
+### caption-side
+`<caption>`(테이블 제목)의 위치를 설정
+* top :	테이블 위쪽 (기본값)
+* bottom :	테이블 아래쪽
+```css
+caption {
+  caption-side: bottom;
+}
+```
+
+### empty-cells
+빈 셀(td 또는 th)을 표시할지 여부 결정
+* show :	기본값, 빈 셀 표시
+* hide :	빈 셀 숨김
+
+```css
+table {
+  empty-cells: hide;
+}
+```
+
+### vertical-align
+텍스트를 위쪽, 가운데, 아래쪽 정렬 가능
+* top :	위쪽 정렬
+* middle :	가운데 정렬 (기본값)
+* bottom :	아래쪽 정렬
+```css
+td {
+  vertical-align: top;
+}
+```

--- a/docs/10_애니메이션
+++ b/docs/10_애니메이션
@@ -1,13 +1,13 @@
 # 애니메이션 및 트랜지션

-| 속성 | 설명 |
-|---|---|
-| transition |  |
-| animation |  |
-| transform |  |
-| transform-style |  |
-| perspective |  |
-| perspective-origin |  |
+| 속성 | 설명 | 옵션 |
+|---|---|---|
+| transition | 요소의 속성이 부드럽게 변화하도록 설정 | 속성 지속시간 타이밍함수 지연시간 |
+| animation | 요소에 키프레임 기반 애니메이션 효과 적용 | 이름 지속시간 타이밍함수 지연시간 반복 횟수 방향 |
+| transform | 요소를 이동, 회전, 확대/축소, 기울이기 변형 | translate(x,y), rotate(deg), scale(x,y), skew(x,y) |
+| transform-style | 3D 변형을 자식 요소에도 적용할지 여부 | flat, preserve-3d |
+| perspective | 3D 원근감을 설정 |
+| perspective-origin | 원근감의 기준점을 설정 |

 ## 트랜지션(Transition)
 트랜지션은 상태가 변화할 때 애니메이션 효과를 추가하는 속성!
@@ -43,7 +43,7 @@ button:hover {
 트랜지션이 일어나는 지속 시간을 명시합니다. 트랜지션 동안 모든 속성에 적용하는 단일 지속 시간을 명시하거나, 다른 주기로 각 속성이 트랜지션하게 하는 여러 지속 시간을 명시할 수 있습니다.
 #### transition-timing-function
 속성의 중간값을 계산하는 방법을 정의하는 함수를 명시합니다. Timing functions는 트랜지션의 중간값을 계산하는 방법을 결정합니다.
-* ease | linear | step-end | steps(4, end)
+* ease, linear, step-end, steps(4, end)
 #### transition-delay
 속성이 변한 시점과 트랜지션이 실제로 시작하는 사이에 기다리는 시간을 정의합니다.

@@ -163,7 +163,6 @@ element.addEventListener('transitionend', function(event){
 * backwards :	애니메이션 시작 전 첫 번째 프레임 유지
 * both :	forwards + backwards 효과

-
 ```css
@keyframes bounce {
  0% {
--- a/docs/14_스크롤
+++ b/docs/14_스크롤
@@ -1,10 +0,0 @@
-# Scroll Snap
-
-| 속성 | 설명 |
-|---|---|
-
-* `scroll-snap-type`
-* `scroll-snap-align`
-* `scroll-snap-stop`
-* `scroll-margin`
-* `scroll-padding`
--- a/docs/14_스크롤.md
+++ b/docs/14_스크롤.md
@@ -0,0 +1,113 @@
+# 스크롤
+
+| 속성 | 설명 | 옵션 |
+|---|---|---|
+| scroll-snap-type | 스냅 동작을 설정 (부모 컨테이너) | none, x mandatory, y proximity |
+| scroll-snap-align | 개별 요소가 스냅되는 위치 설정 | none, start, center, end |
+| scroll-snap-stop | 스크롤 중간에 멈출지 여부 설정 | normal, always |
+| overflow | 스크롤 가능하도록 설정 | auto, scroll, hidden |
+| scroll-margin | 스크롤 스냅 시 요소의 바깥 여백을 설정	개별 요소 |
+| scroll-padding | 스크롤 컨테이너의 내부 여백을 설정	스크롤 컨테이너 |
+
+## 스크롤 스냅
+스크롤 스냅(Scroll Snap)은 사용자가 스크롤할 때 특정 위치에서 멈추도록 설정하는 기능이야.
+> 갤러리, 슬라이더, 페이지 섹션 등에서 부드럽고 정렬된 스크롤 효과를 제공!
+
+### scroll-snap-type
+스크롤 스냅이 적용될 축(X, Y)을 지정하고 동작 방식을 설정. 부모 컨테이너에서 설정해야 함
+* none :	기본값 (스냅 기능 없음)
+* x mandatory :	가로(X축) 스크롤 + 강제 스냅
+* y mandatory :	세로(Y축) 스크롤 + 강제 스냅
+* x proximity :	가로(X축) 스크롤 + 부드러운 스냅
+* y proximity :	세로(Y축) 스크롤 + 부드러운 스냅
+```css
+.container {
+  scroll-snap-type: y mandatory;
+  overflow-y: scroll;
+  height: 300px;
+} /* 세로 스크롤 시 강제 스냅 적용! */
+```
+
+### scroll-snap-align
+각 아이템이 스냅될 위치 지정. 자식 요소에서 설정해야 함
+* none :	스냅 없음
+* start :	스크롤 시작점에서 정렬
+* center :	스크롤 중앙에서 정렬
+* end :	스크롤 끝에서 정렬
+```css
+.item {
+  scroll-snap-align: center;
+} /* 스크롤할 때 각 요소가 중앙에서 멈춤! */
+```
+
+### scroll-snap-stop
+스크롤이 한 번에 여러 개의 아이템을 넘기지 않도록 설정
+* normal :	기본값 (일반적인 스크롤)
+* always :	항상 한 번에 하나씩만 스냅됨
+```css
+.container {
+  scroll-snap-type: x mandatory;
+  overflow-x: scroll;
+}
+.item {
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+} /* 항상 한 번에 한 개의 아이템만 스크롤되도록 설정! */
+```
+
+### 스크롤 스냅 실전 예제
+#### 가로 방향 스크롤 갤러리
+갤러리를 스크롤할 때 각 아이템이 중앙에서 멈춤!
+```css
+.gallery {
+  display: flex;
+  overflow-x: scroll;
+  scroll-snap-type: x mandatory;
+  gap: 10px;
+}
+.item {
+  flex: 0 0 300px;
+  scroll-snap-align: center;
+}
+```
+
+#### 세로 스크롤 섹션
+한 섹션씩 부드럽게 스크롤되도록 설정!
+```css
+.container {
+  height: 100vh;
+  overflow-y: scroll;
+  scroll-snap-type: y proximity;
+}
+.section {
+  height: 100vh;
+  scroll-snap-align: start;
+}
+```
+
+## 스크롤 위치 조정
+### scroll-margin
+스크롤 시 요소가 닿는 위치를 조정 (스크롤이 요소를 가리지 않도록 조정 가능)
+* 개별 요소 (scroll-snap-align과 함께 사용)
+```css
+.section {
+  scroll-margin-top: 100px;
+}
+/* 스크롤 이동 시 100px 여유 공간을 확보하여 요소가 화면 맨 위에 붙지 않도록 조정! */
+```
+```html
+<a href="#section1">Go to Section 1</a>
+<div id="section1" class="section">Section 1</div>
+```
+
+### scroll-padding
+스크롤 컨테이너 내부 여백을 설정하여, 콘텐츠가 더 보기 좋게 배치되도록 조정
+* 스크롤 컨테이너 (scroll-snap-type과 함께 사용)
+```css
+.container {
+  scroll-snap-type: y mandatory;
+  scroll-padding-top: 50px;
+  overflow-y: scroll;
+  height: 100vh;
+} /* 스크롤할 때, 맨 위 요소가 50px 떨어진 위치에서 정렬됨! */
+```
--- a/docs/15_폼.md
+++ b/docs/15_폼.md
@@ -1,10 +1,153 @@
-# Styling Form
+# 폼 요소 스타일링

+| 속성 | 설명 | 옵션 |
+|---|---|---|
+| width, height | 입력 필드 크기 조절 | `width: 200px; height: 40px;` |
+| padding | 내부 여백 조절 | `padding: 10px;` |
+| border | 테두리 스타일 지정 | `border: 1px solid #ccc;` |
+| border-radius | 입력 필드 모서리 둥글게 | `border-radius: 5px;` |
+| outline| 포커스 시 외곽선 지정 | `outline: none;` |
+| box-shadow | 입력 필드에 그림자 추가 | `box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);` |
+| background-color | 입력 필드 배경색 변경 | `background-color: #f9f9f9;` |
+| color | 텍스트 색상 변경 | `color: #333;` |
+| font-size | 입력 필드 텍스트 크기 조절 | `font-size: 16px;` | 
+| text-align | 텍스트 정렬 | `text-align: center;` |
+| cursor | 마우스 커서 스타일 지정 | `cursor: pointer;` |
+| resize | textarea 크기 조절 가능 여부 | `resize: none;` |
+| appearance | 브라우저 기본 스타일 제거 | `appearance: none;` |
+
+| 가상 클래스 | 설명 | 예시 |
+|---|---|---|
+| :focus | 요소가 포커스를 받았을 때 | `input:focus { border-color: blue; }` |
+| :hover | 마우스를 올렸을 때 | `button:hover { background: red; }` | 
+| :active | 클릭 중일 때 | `button:active { background: darkred; }` |
+| :disabled | 비활성화된 요소 | `input:disabled { background: #eee; }` |
+| :enabled | 활성화된 요소 | `input:enabled { background: white; }` |
+| :required | 필수 입력 필드 | `input:required { border: 2px solid red; }` |
+| :optional | 필수 입력이 아닌 필드 | `input:optional { border: 2px solid green; }` | 
+| :checked | 체크된 체크박스/라디오 버튼 | `input:checked { accent-color: green; }` |
+| :placeholder-shown | placeholder가 표시될 때 | `input:placeholder-shown { background: #f0f0f0; }` |
+| :valid | 유효한 입력값일 때 | `input:valid { border: 2px solid green; }` |
+| :invalid | 유효하지 않은 입력값일 때 | `input:invalid { border: 2px solid red; }` |
+| :read-only | 읽기 전용 필드 | `input:read-only { background: lightgray; }` |
+
+| 가상 요소 | 설명 | 예시 |
+|---|---|---|
+| ::placeholder | placeholder 텍스트 스타일링 | `input::placeholder { color: gray; }` |
+| ::selection | 사용자가 선택한 텍스트 스타일 변경 | `input::selection { background: yellow; }` |

 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 | 
+## 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을 사용하면 윤곽선과 요소 사이의 간격을 조절할 수 있어.

+## appearance
+appearance 속성은 브라우저의 기본 UI 스타일을 제거하거나 변경하는 데 사용돼.
+> 버튼, 입력 필드, 셀렉트 박스 등 기본 스타일이 적용된 요소를 커스텀할 때 유용!

-* `cursor`
+* auto :	기본값 (브라우저 기본 스타일 유지)
+* none :	기본 스타일 제거 (완전히 커스텀 가능)
+* textfield :	입력 필드를 일반 텍스트 필드처럼 표시
+* button :	버튼을 기본 버튼 스타일로 표시
+* checkbox :	체크박스를 기본 체크박스 스타일로 표시
+* radio :	라디오 버튼을 기본 스타일로 표시 
+
+```css
+input {
+  appearance: none;
+  border: 1px solid gray;
+  padding: 10px;
+  border-radius: 5px;
+} /* 브라우저의 기본 입력 필드 스타일을 제거하고, 커스텀 디자인 적용 가능 */
+```
+
+## cursor
+cursor 속성은 마우스를 올렸을 때 커서 모양을 변경하는 데 사용돼.
+> 버튼, 링크, 드래그 가능한 요소 등에 적용 가능!
+
+* default :	기본 커서 (화살표)
+* pointer :	손가락 모양 (클릭 가능한 요소)
+* text :	텍스트 입력 모드 (I자 모양)
+* not-allowed :	사용 금지 (⛔)
+* wait :	로딩 중 (⌛)
+* progress :	진행 중 (⏳)
+* move :	이동 가능 (↔️)
+* grab / grabbing :	드래그 가능 (✊ → 🤲)
+* crosshair :	십자선 (+)
+* help :	도움말 (❓)
+* none :	커서 숨기기
+
+```css
+button {
+  cursor: pointer;
+}
+input {
+  cursor: text;
+}
+.disabled {
+  cursor: not-allowed;
+}
+```
+
+## resize
+resize 속성은 요소의 크기를 사용자가 조절할 수 있도록 설정하는 속성이야.
+> textarea 같은 입력 필드의 크기를 조절 가능!
+* none, both, horizontal, vertical
+```css
+textarea {
+  resize: vertical;
+} /* 텍스트 영역(textarea)의 세로 크기만 조절 가능하도록 설정! */
+```
+
+## 예시
+### 텍스트 입력 필드
+입력 필드가 포커스를 받으면 파란색 테두리와 그림자 효과 추가!
+```css
+input[type="text"] {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  font-size: 16px;
+}
+input[type="text"]:focus {
+  border-color: #007bff;
+  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
+}
+```
+### 버튼
+버튼에 호버(마우스 오버) 시 색상이 변경됨
+```css
+button {
+  background-color: #007bff;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 16px;
+}
+button:hover {
+  background-color: #0056b3;
+}
+```
+### 체크박스 & 라디오 버튼
+accent-color 속성을 사용하면 체크박스와 라디오 버튼 색상을 쉽게 변경 가능!
+```css
+input[type="checkbox"], input[type="radio"] {
+  width: 20px;
+  height: 20px;
+  accent-color: #007bff; /* 체크박스 & 라디오 버튼 색상 변경 */
+}
+```
--- a/docs/16_이미지.md
+++ b/docs/16_이미지.md
@@ -1,10 +1,52 @@
-# Styling Image and Media
+# 이미지 관련 속성 (img, picture, video)

-* `width`
-* `height`
-* `min-width`, `min-height`
-* `max-width`, `max-height`
-* `object-fit` : fill | contain | cover | none | scale-down
-* `object-position`
+| 속성 | 설명 | 옵션 |
+|---|---|---|
+| width / height | 요소의 크기 설정 | auto |
+| max-width / max-height | 요소의 최대 크기 지정 | none, inherit |
+| min-width / min-height | 요소의 최소 크기 지정 | none, inherit |
+| opacity | 이미지 투명도 조절 |
+| object-fit | 이미지/비디오가 박스에 맞게 조절되는 방식 | fill, contain, cover, none, scale-down |
+| object-position | 이미지/비디오의 위치 조정 | left top, center center, right bottom, % |
+| filter | 이미지 필터 효과 적용 | blur(), brightness(), grayscale(), contrast() | 
+| aspect-ratio | 가로 세로 비율 유지 | 16 / 9, 4 / 3, 1 / 1 | 

+## object-fit
+컨테이너 안에서 이미지가 어떻게 맞춰질지 결정
+* fill (기본값): 이미지가 컨테이너에 완전히 채워짐 (비율 무시)
+* contain: 이미지가 컨테이너 안에 비율 유지하며 맞춤
+* cover: 컨테이너를 완전히 덮되, 비율 유지
+* none: 이미지 크기 그대로 유지 (잘릴 수도 있음)
+* scale-down: none 또는 contain 중 더 작은 크기로 적용
+```css
+img {
+  width: 300px;
+  height: 200px;
+  object-fit: cover;
+}
+```
+## object-position
+이미지가 컨테이너 안에서 어떻게 배치될지 설정
+```css
+img {
+  width: 300px;
+  height: 200px;
+  object-fit: cover;
+  object-position: top;
+}
+```
+## filter
+이미지 필터 효과 적용
+```css
+img {
+  filter: grayscale(100%) blur(2px);
+} /* 이미지를 흑백 + 약간 흐릿하게 변경! */
+```

+## aspect-ratio 
+비율 유지
+```css
+img {
+  aspect-ratio: 16 / 9;
+} /* 이미지가 16:9 비율을 유지하면서 크기가 조정됨! */
+```