2025-02-03T19:29:18
This commit is contained in:
@@ -53,7 +53,6 @@ CSS 박스 모델은 4개의 영역으로 구성돼.
|
|||||||
| min-width / min-height | 요소의 최소 크기 지정 | none, inherit |
|
| min-width / min-height | 요소의 최소 크기 지정 | none, inherit |
|
||||||
| border-radius | 요소의 모서리를 둥글게 만듦 | |
|
| border-radius | 요소의 모서리를 둥글게 만듦 | |
|
||||||
| box-shadow | 요소의 그림자 효과 설정 | |
|
| box-shadow | 요소의 그림자 효과 설정 | |
|
||||||
| outline | 요소의 외곽선 | |
|
|
||||||
|
|
||||||
### width / height
|
### 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을 사용하면 윤곽선과 요소 사이의 간격을 조절할 수 있어.
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -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
|
### background-color
|
||||||
요소의 배경 색을 지정
|
요소의 배경 색을 지정
|
||||||
* 색상 값: red, #ff0000, rgb(255, 0, 0), rgba(255, 0, 0, 0.5), transparent 등
|
* 색상 값: red, #ff0000, rgb(255, 0, 0), rgba(255, 0, 0, 0.5), transparent 등
|
||||||
@@ -108,6 +117,8 @@
|
|||||||
background-origin: content-box;
|
background-origin: content-box;
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
### background-blend-mode
|
||||||
|
* normal, multiply, overlay, screen
|
||||||
|
|
||||||
## color
|
## color
|
||||||
글자 색상을 지정
|
글자 색상을 지정
|
||||||
|
|||||||
@@ -1,18 +1,29 @@
|
|||||||
# 글꼴 및 텍스트 스타일
|
# 글꼴 및 텍스트 스타일
|
||||||
웹페이지에서 텍스트를 멋지게 스타일링하려면 글꼴(Font)과 텍스트(Text) 관련 CSS 속성을 잘 활용해야 해!
|
웹페이지에서 텍스트를 멋지게 스타일링하려면 글꼴(Font)과 텍스트(Text) 관련 CSS 속성을 잘 활용해야 해!
|
||||||
|
|
||||||
| 속성 | 설명 |
|
| 속성 | 설명 | 옵션 |
|
||||||
|---|---|
|
|---|---|---|
|
||||||
| font | |
|
| font-family | 글꼴 지정 | sans-serif, monospace, serif |
|
||||||
| text-align | |
|
| font-size | 글자 크기 지정 |
|
||||||
| text-decoration | |
|
| font-weight | 글자 두께 조정 | normal, bold, lighter, bolder |
|
||||||
| text-shadow | |
|
| font-style | 글자의 스타일 | normal, italic, oblique |
|
||||||
| text-transform | |
|
| text-align | 텍스트 정렬 방식 | left, right, center, justify |
|
||||||
| text-indent | |
|
| text-decoration | 텍스트에 밑줄, 취소선 등의 효과 적용 | none, underline, overline, line-through |
|
||||||
| letter-spacing | |
|
| text-orientation | 세로 텍스트 방향 설정 | mixed, upright, sideways |
|
||||||
| word-spacing | |
|
| text-shadow | 텍스트에 그림자 효과 추가 | x-offset y-offset blur color |
|
||||||
| line-height | |
|
| text-transform | 텍스트의 대소문자 변환 | none, uppercase, lowercase, capitalize |
|
||||||
| white-space | |
|
| 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 속성을 사용하면 font-style, font-variant, font-weight, font-size, font-family를 한 줄로 설정할 수 있음.
|
font 속성을 사용하면 font-style, font-variant, font-weight, font-size, font-family를 한 줄로 설정할 수 있음.
|
||||||
@@ -24,7 +35,6 @@ p {
|
|||||||
|
|
||||||
font- 접두어가 붙은 속성들은 글꼴 스타일을 지정하는 역할을 해. 글자 크기, 두께, 스타일, 종류 등을 설정할 수 있어!
|
font- 접두어가 붙은 속성들은 글꼴 스타일을 지정하는 역할을 해. 글자 크기, 두께, 스타일, 종류 등을 설정할 수 있어!
|
||||||
|
|
||||||
|
|
||||||
### font-family
|
### font-family
|
||||||
텍스트의 글꼴을 설정하는 속성. 여러 개의 글꼴을 쉼표(,)로 나열할 수 있음!
|
텍스트의 글꼴을 설정하는 속성. 여러 개의 글꼴을 쉼표(,)로 나열할 수 있음!
|
||||||
> 브라우저에 없는 글꼴은 적용되지 않으므로, 백업용 폰트도 설정하는 게 좋음!
|
> 브라우저에 없는 글꼴은 적용되지 않으므로, 백업용 폰트도 설정하는 게 좋음!
|
||||||
@@ -57,6 +67,8 @@ h1 {
|
|||||||
> em은 부모 요소의 크기를 기준으로 하고, rem은 `<html>` 요소를 기준으로 함.
|
> em은 부모 요소의 크기를 기준으로 하고, rem은 `<html>` 요소를 기준으로 함.
|
||||||
|
|
||||||
#### font-size-adjust
|
#### font-size-adjust
|
||||||
|
x-height(소문자 높이)를 기준으로 글꼴 크기를 조정하여, 폰트가 변경되었을 때 가독성을 유지
|
||||||
|
* none, 0 ~ 1 사이 값 사용
|
||||||
|
|
||||||
### font-weight
|
### 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-variant-alternates / font-variants-caps / font-variant-east-asian / font-variant-ligatures / font-variant-numeric / font-variant-position`
|
||||||
|
|
||||||
### font-stretch
|
### 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
|
* 값: left, right, center, justify
|
||||||
```css
|
```css
|
||||||
@@ -115,9 +138,11 @@ p { /* 텍스트가 좌우 균형을 맞춰 정렬됨 */
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
## text-align-last
|
#### text-align-last
|
||||||
|
문단의 마지막 줄을 어떻게 정렬할지 결정
|
||||||
|
* auto(기본값), left, right, center, justify
|
||||||
|
|
||||||
## text-decoration
|
### text-decoration
|
||||||
텍스트에 밑줄, 취소선 등을 추가할 때 사용
|
텍스트에 밑줄, 취소선 등을 추가할 때 사용
|
||||||
* none : 기본값 (장식 없음)
|
* none : 기본값 (장식 없음)
|
||||||
* underline : 밑줄
|
* underline : 밑줄
|
||||||
@@ -129,21 +154,29 @@ p {
|
|||||||
text-decoration: underline line-through;
|
text-decoration: underline line-through;
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
### text-decoration-line
|
#### text-decoration-line
|
||||||
* none, underline, overline, line-through
|
* none, underline, overline, line-through
|
||||||
### text-decoration-style
|
#### text-decoration-style
|
||||||
* solid, double, dotted, dashed, wavy
|
* solid, double, dotted, dashed, wavy
|
||||||
### text-decoration-color
|
#### text-decoration-color
|
||||||
|
|
||||||
### text-underline-position
|
#### text-underline-position
|
||||||
### text-rendering
|
밑줄 위치를 조정
|
||||||
|
* 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 : 모두 대문자 변환
|
* uppercase : 모두 대문자 변환
|
||||||
* lowercase : 모두 소문자 변환
|
* lowercase : 모두 소문자 변환
|
||||||
@@ -154,7 +187,7 @@ p { /* 텍스트를 모두 대문자로 변환 */
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
## text-indent
|
### text-indent
|
||||||
문단의 첫 줄을 들여쓰기 할 때 사용하는 속성
|
문단의 첫 줄을 들여쓰기 할 때 사용하는 속성
|
||||||
```css
|
```css
|
||||||
p {
|
p {
|
||||||
@@ -169,9 +202,11 @@ p {
|
|||||||
```
|
```
|
||||||
> 모든 줄을 들여쓰기 하려면 margin-left 사용!
|
> 모든 줄을 들여쓰기 하려면 margin-left 사용!
|
||||||
|
|
||||||
## text-overflow
|
### text-overflow
|
||||||
|
텍스트가 박스를 벗어날 경우 clip(잘라내기) 또는 ellipsis(... 말줄임표 표시) 적용
|
||||||
|
* clip, ellipsis
|
||||||
|
|
||||||
## letter-spacing
|
### letter-spacing
|
||||||
글자 사이의 간격을 조절
|
글자 사이의 간격을 조절
|
||||||
```css
|
```css
|
||||||
p {
|
p {
|
||||||
@@ -179,7 +214,7 @@ p {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
## word-spacing
|
### word-spacing
|
||||||
단어 사이의 간격을 조절
|
단어 사이의 간격을 조절
|
||||||
```css
|
```css
|
||||||
p {
|
p {
|
||||||
@@ -187,7 +222,7 @@ p {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
## line-height
|
### line-height
|
||||||
줄 간격을 조절
|
줄 간격을 조절
|
||||||
```css
|
```css
|
||||||
p { /* 줄 간격을 1.5배로 조절 */
|
p { /* 줄 간격을 1.5배로 조절 */
|
||||||
@@ -195,7 +230,8 @@ p { /* 줄 간격을 1.5배로 조절 */
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
## white-space
|
## 줄바꿈 및 방향 관련 속성
|
||||||
|
### white-space
|
||||||
공백, 줄바꿈, 자동 줄바꿈(줄바꿈 방지) 등을 설정하는 속성
|
공백, 줄바꿈, 자동 줄바꿈(줄바꿈 방지) 등을 설정하는 속성
|
||||||
* normal : 여러 개의 공백을 하나로 줄이고, 텍스트가 넘치면 자동 줄바꿈됨!
|
* normal : 여러 개의 공백을 하나로 줄이고, 텍스트가 넘치면 자동 줄바꿈됨!
|
||||||
* nowrap : 줄바꿈 없이 한 줄로 표시됨!
|
* 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
|
### word-wrap = overflow-wrap
|
||||||
어떤 문자가 내용 칸 밖으로 넘치지 않게 브라우저가 단어 마디 안에 줄을 바꿔야 할 것인지 아닌지를 정할 때 사용
|
긴 단어가 박스를 넘칠 경우 자동 줄바꿈 가능
|
||||||
* normal | break-word
|
* normal, break-word
|
||||||
|
|
||||||
## direction
|
### direction
|
||||||
|
텍스트의 읽기 방향 설정
|
||||||
|
* ltr(왼쪽→오른쪽, 기본값), rtl(오른쪽→왼쪽)
|
||||||
|
|
||||||
## hypens
|
### hypens
|
||||||
|
긴 단어를 하이픈(-)으로 자동 줄바꿈
|
||||||
|
* none(기본값), manual, auto
|
||||||
|
|
||||||
## writing-mode
|
### writing-mode
|
||||||
글 쓰기 방향
|
텍스트 쓰기 방향을 결정
|
||||||
* horizontal-tb | vertical-rl | vertical-lr
|
* horizontal-tb(기본값), vertical-rl, vertical-lr
|
||||||
|
|
||||||
쓰기 모드를 전환하면, 블록 (block) 방향과 인라인 (inline) 방향을 변경합니다. 블록 크기는 항상 쓰기 모드에서 페이지에 표시되는 방향 블록입니다. 인라인 크기는 항상 문장이 표시되는 방향입니다.
|
쓰기 모드를 전환하면, 블록 (block) 방향과 인라인 (inline) 방향을 변경합니다. 블록 크기는 항상 쓰기 모드에서 페이지에 표시되는 방향 블록입니다. 인라인 크기는 항상 문장이 표시되는 방향입니다.
|
||||||
|
|||||||
@@ -1,23 +1,141 @@
|
|||||||
# 리스트와 테이블
|
# 리스트와 테이블
|
||||||
|
|
||||||
| 속성 | 설명 |
|
| 속성 | 설명 | 옵션 |
|
||||||
|---|---|
|
|---|---|
|
||||||
| list-style | |
|
| list-style | 리스트 스타일 한 번에 설정 |
|
||||||
| table-layout | |
|
| table-layout | 테이블 크기 조정 방식 | auto, fixed |
|
||||||
| border-collapse | |
|
| border-collapse | 테두리 합치기 | separate, collapse |
|
||||||
| caption-side | |
|
| border-spacing | 셀 간 간격 |
|
||||||
|
| caption-side | 표 제목 위치 | top, bottom |
|
||||||
|
| empty-cells | 빈 셀 표시 여부 | show, hide |
|
||||||
|
| vertical-align | 셀 내 텍스트 정렬 | top, middle, bottom |
|
||||||
|
|
||||||
## 리스트
|
## 리스트 관련 속성 (List Properties)
|
||||||
|
리스트(ul, ol, li) 스타일을 조정할 때 사용되는 속성들!
|
||||||
|
|
||||||
* `list-style`
|
### 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
|
```css
|
||||||
* `list-style-image`
|
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
|
#### list-style-position
|
||||||
* border-collapse
|
리스트 기호 위치
|
||||||
* caption-side : top | bottom
|
* 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;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
|||||||
@@ -1,13 +1,13 @@
|
|||||||
# 애니메이션 및 트랜지션
|
# 애니메이션 및 트랜지션
|
||||||
|
|
||||||
| 속성 | 설명 |
|
| 속성 | 설명 | 옵션 |
|
||||||
|---|---|
|
|---|---|---|
|
||||||
| transition | |
|
| transition | 요소의 속성이 부드럽게 변화하도록 설정 | 속성 지속시간 타이밍함수 지연시간 |
|
||||||
| animation | |
|
| animation | 요소에 키프레임 기반 애니메이션 효과 적용 | 이름 지속시간 타이밍함수 지연시간 반복 횟수 방향 |
|
||||||
| transform | |
|
| transform | 요소를 이동, 회전, 확대/축소, 기울이기 변형 | translate(x,y), rotate(deg), scale(x,y), skew(x,y) |
|
||||||
| transform-style | |
|
| transform-style | 3D 변형을 자식 요소에도 적용할지 여부 | flat, preserve-3d |
|
||||||
| perspective | |
|
| perspective | 3D 원근감을 설정 |
|
||||||
| perspective-origin | |
|
| perspective-origin | 원근감의 기준점을 설정 |
|
||||||
|
|
||||||
## 트랜지션(Transition)
|
## 트랜지션(Transition)
|
||||||
트랜지션은 상태가 변화할 때 애니메이션 효과를 추가하는 속성!
|
트랜지션은 상태가 변화할 때 애니메이션 효과를 추가하는 속성!
|
||||||
@@ -43,7 +43,7 @@ button:hover {
|
|||||||
트랜지션이 일어나는 지속 시간을 명시합니다. 트랜지션 동안 모든 속성에 적용하는 단일 지속 시간을 명시하거나, 다른 주기로 각 속성이 트랜지션하게 하는 여러 지속 시간을 명시할 수 있습니다.
|
트랜지션이 일어나는 지속 시간을 명시합니다. 트랜지션 동안 모든 속성에 적용하는 단일 지속 시간을 명시하거나, 다른 주기로 각 속성이 트랜지션하게 하는 여러 지속 시간을 명시할 수 있습니다.
|
||||||
#### transition-timing-function
|
#### transition-timing-function
|
||||||
속성의 중간값을 계산하는 방법을 정의하는 함수를 명시합니다. Timing functions는 트랜지션의 중간값을 계산하는 방법을 결정합니다.
|
속성의 중간값을 계산하는 방법을 정의하는 함수를 명시합니다. Timing functions는 트랜지션의 중간값을 계산하는 방법을 결정합니다.
|
||||||
* ease | linear | step-end | steps(4, end)
|
* ease, linear, step-end, steps(4, end)
|
||||||
#### transition-delay
|
#### transition-delay
|
||||||
속성이 변한 시점과 트랜지션이 실제로 시작하는 사이에 기다리는 시간을 정의합니다.
|
속성이 변한 시점과 트랜지션이 실제로 시작하는 사이에 기다리는 시간을 정의합니다.
|
||||||
|
|
||||||
@@ -163,7 +163,6 @@ element.addEventListener('transitionend', function(event){
|
|||||||
* backwards : 애니메이션 시작 전 첫 번째 프레임 유지
|
* backwards : 애니메이션 시작 전 첫 번째 프레임 유지
|
||||||
* both : forwards + backwards 효과
|
* both : forwards + backwards 효과
|
||||||
|
|
||||||
|
|
||||||
```css
|
```css
|
||||||
@keyframes bounce {
|
@keyframes bounce {
|
||||||
0% {
|
0% {
|
||||||
|
|||||||
@@ -1,10 +0,0 @@
|
|||||||
# Scroll Snap
|
|
||||||
|
|
||||||
| 속성 | 설명 |
|
|
||||||
|---|---|
|
|
||||||
|
|
||||||
* `scroll-snap-type`
|
|
||||||
* `scroll-snap-align`
|
|
||||||
* `scroll-snap-stop`
|
|
||||||
* `scroll-margin`
|
|
||||||
* `scroll-padding`
|
|
||||||
113
docs/14_스크롤.md
Normal file
113
docs/14_스크롤.md
Normal file
@@ -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 떨어진 위치에서 정렬됨! */
|
||||||
|
```
|
||||||
149
docs/15_폼.md
149
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/Styling_web_forms
|
||||||
https://developer.mozilla.org/en-US/docs/Learn/Forms/Advanced_form_styling
|
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; /* 체크박스 & 라디오 버튼 색상 변경 */
|
||||||
|
}
|
||||||
|
```
|
||||||
@@ -1,10 +1,52 @@
|
|||||||
# Styling Image and Media
|
# 이미지 관련 속성 (img, picture, video)
|
||||||
|
|
||||||
* `width`
|
| 속성 | 설명 | 옵션 |
|
||||||
* `height`
|
|---|---|---|
|
||||||
* `min-width`, `min-height`
|
| width / height | 요소의 크기 설정 | auto |
|
||||||
* `max-width`, `max-height`
|
| max-width / max-height | 요소의 최대 크기 지정 | none, inherit |
|
||||||
* `object-fit` : fill | contain | cover | none | scale-down
|
| min-width / min-height | 요소의 최소 크기 지정 | none, inherit |
|
||||||
* `object-position`
|
| 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 비율을 유지하면서 크기가 조정됨! */
|
||||||
|
```
|
||||||
|
|||||||
Reference in New Issue
Block a user