diff --git a/docs/03_박스 모델.md b/docs/03_박스 모델.md index 381fea3..ed1ee95 100644 --- a/docs/03_박스 모델.md +++ b/docs/03_박스 모델.md @@ -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을 사용하면 윤곽선과 요소 사이의 간격을 조절할 수 있어. - diff --git a/docs/05_배경 및 색상.md b/docs/05_배경 및 색상.md index b7d8d09..59c503b 100644 --- a/docs/05_배경 및 색상.md +++ b/docs/05_배경 및 색상.md @@ -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 글자 색상을 지정 diff --git a/docs/06_글꼴 및 텍스트 스타일.md b/docs/06_글꼴 및 텍스트 스타일.md index a09de88..43d3199 100644 --- a/docs/06_글꼴 및 텍스트 스타일.md +++ b/docs/06_글꼴 및 텍스트 스타일.md @@ -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은 `` 요소를 기준으로 함. #### 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) 방향을 변경합니다. 블록 크기는 항상 쓰기 모드에서 페이지에 표시되는 방향 블록입니다. 인라인 크기는 항상 문장이 표시되는 방향입니다. diff --git a/docs/07_리스트와 테이블.md b/docs/07_리스트와 테이블.md index 184ce3d..5b936a0 100644 --- a/docs/07_리스트와 테이블.md +++ b/docs/07_리스트와 테이블.md @@ -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 +``(테이블 제목)의 위치를 설정 +* 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; +} +``` diff --git a/docs/10_애니메이션 및 트랜지션.md b/docs/10_애니메이션 및 트랜지션.md index 6b58498..676fd40 100644 --- a/docs/10_애니메이션 및 트랜지션.md +++ b/docs/10_애니메이션 및 트랜지션.md @@ -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% { diff --git a/docs/14_스크롤 스냅.md b/docs/14_스크롤 스냅.md deleted file mode 100644 index 1c2fb36..0000000 --- a/docs/14_스크롤 스냅.md +++ /dev/null @@ -1,10 +0,0 @@ -# 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/14_스크롤.md b/docs/14_스크롤.md new file mode 100644 index 0000000..e0e7037 --- /dev/null +++ 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 +Go to Section 1 +
Section 1
+``` + +### scroll-padding +스크롤 컨테이너 내부 여백을 설정하여, 콘텐츠가 더 보기 좋게 배치되도록 조정 +* 스크롤 컨테이너 (scroll-snap-type과 함께 사용) +```css +.container { + scroll-snap-type: y mandatory; + scroll-padding-top: 50px; + overflow-y: scroll; + height: 100vh; +} /* 스크롤할 때, 맨 위 요소가 50px 떨어진 위치에서 정렬됨! */ +``` diff --git a/docs/15_폼.md b/docs/15_폼.md index 758a08a..f8ef900 100644 --- 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` \ No newline at end of file +* 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; /* 체크박스 & 라디오 버튼 색상 변경 */ +} +``` \ No newline at end of file diff --git a/docs/16_이미지.md b/docs/16_이미지.md index 29fc8a9..84ea342 100644 --- 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 비율을 유지하면서 크기가 조정됨! */ +```