2025-02-03T13:25:31
This commit is contained in:
@@ -192,23 +192,3 @@ p {
|
|||||||
이렇게 하면 어떤 선택자보다도 color: blue가 적용됨.
|
이렇게 하면 어떤 선택자보다도 color: blue가 적용됨.
|
||||||
하지만 너무 많이 사용하면 유지보수가 어려워지니 필요할 때만 쓰는 게 좋아!
|
하지만 너무 많이 사용하면 유지보수가 어려워지니 필요할 때만 쓰는 게 좋아!
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
|
|
||||||
5. CSS 실전 예제
|
|
||||||
네비게이션 바 스타일링
|
|
||||||
카드 UI 디자인
|
|
||||||
반응형 웹사이트 만들기
|
|
||||||
다크 모드 구현
|
|
||||||
CSS 애니메이션 활용
|
|
||||||
|
|
||||||
6. 최적화 및 모범 사례
|
|
||||||
CSS 성능 최적화
|
|
||||||
유지보수하기 쉬운 CSS 작성법
|
|
||||||
BEM (Block, Element, Modifier) 방법론
|
|
||||||
SCSS/SASS 개요
|
|
||||||
|
|
||||||
7. 부록
|
|
||||||
CSS 주요 속성 및 값 요약표
|
|
||||||
크로스 브라우징 이슈 해결
|
|
||||||
유용한 CSS 리소스 및 도구
|
|
||||||
@@ -1,8 +1,25 @@
|
|||||||
# 선택자
|
# CSS 선택자
|
||||||
|
|
||||||
CSS 선택자는 HTML 요소를 선택하여 스타일을 적용하는 데 사용돼.
|
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)
|
## 기본 선택자 (Basic Selectors)
|
||||||
|
|
||||||
### 전체 선택자 (`*`)
|
### 전체 선택자 (`*`)
|
||||||
|
|||||||
@@ -18,6 +18,7 @@ CSS 단위는 크게 절대 단위와 상대 단위로 나뉘어.
|
|||||||
* 가장 많이 쓰이는 단위
|
* 가장 많이 쓰이는 단위
|
||||||
* 디바이스의 **물리적 픽셀(pixel)**을 기준으로 함
|
* 디바이스의 **물리적 픽셀(pixel)**을 기준으로 함
|
||||||
* 고정된 크기이기 때문에 반응형 디자인에는 다소 불리함
|
* 고정된 크기이기 때문에 반응형 디자인에는 다소 불리함
|
||||||
|
|
||||||
```css
|
```css
|
||||||
p {
|
p {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
@@ -64,6 +65,7 @@ div {
|
|||||||
* 부모 요소의 font-size를 기준으로 크기가 결정됨
|
* 부모 요소의 font-size를 기준으로 크기가 결정됨
|
||||||
* 기본적으로 1em = 부모 글자 크기
|
* 기본적으로 1em = 부모 글자 크기
|
||||||
* 배수로 크기를 조정할 수 있음
|
* 배수로 크기를 조정할 수 있음
|
||||||
|
|
||||||
```css
|
```css
|
||||||
.parent {
|
.parent {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
@@ -74,6 +76,7 @@ div {
|
|||||||
/* 부모가 20px이면, 자식 요소의 글자 크기는 30px이 됨. */
|
/* 부모가 20px이면, 자식 요소의 글자 크기는 30px이 됨. */
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
> em을 중첩해서 사용하면 예상보다 큰 값이 나올 수 있음!
|
> em을 중첩해서 사용하면 예상보다 큰 값이 나올 수 있음!
|
||||||
> ```css
|
> ```css
|
||||||
> body {
|
> body {
|
||||||
@@ -90,6 +93,7 @@ div {
|
|||||||
### rem (루트 요소 <html>의 글자 크기 기준)
|
### rem (루트 요소 <html>의 글자 크기 기준)
|
||||||
* html 요소의 font-size를 기준으로 크기 결정
|
* html 요소의 font-size를 기준으로 크기 결정
|
||||||
* em과 달리 부모 요소에 영향을 받지 않음
|
* em과 달리 부모 요소에 영향을 받지 않음
|
||||||
|
|
||||||
```css
|
```css
|
||||||
html {
|
html {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
@@ -108,32 +112,38 @@ html {
|
|||||||
### vw / vh (뷰포트 기준)
|
### vw / vh (뷰포트 기준)
|
||||||
* vw: 브라우저 너비(Viewport Width)의 %
|
* vw: 브라우저 너비(Viewport Width)의 %
|
||||||
* vh: 브라우저 높이(Viewport Height)의 %
|
* vh: 브라우저 높이(Viewport Height)의 %
|
||||||
|
|
||||||
```css
|
```css
|
||||||
div {
|
div {
|
||||||
width: 50vw; /* 화면 너비의 50% */
|
width: 50vw; /* 화면 너비의 50% */
|
||||||
height: 30vh; /* 화면 높이의 30% */
|
height: 30vh; /* 화면 높이의 30% */
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
> 반응형 디자인에서 매우 유용!
|
> 반응형 디자인에서 매우 유용!
|
||||||
|
|
||||||
### vmin / vmax (작은 쪽 or 큰 쪽 기준)
|
### vmin / vmax (작은 쪽 or 큰 쪽 기준)
|
||||||
* vmin: vw와 vh 중 작은 값 사용
|
* vmin: vw와 vh 중 작은 값 사용
|
||||||
* vmax: vw와 vh 중 큰 값 사용
|
* vmax: vw와 vh 중 큰 값 사용
|
||||||
|
|
||||||
```css
|
```css
|
||||||
div {
|
div {
|
||||||
width: 10vmin; /* 작은 쪽의 10% */
|
width: 10vmin; /* 작은 쪽의 10% */
|
||||||
height: 20vmax; /* 큰 쪽의 20% */
|
height: 20vmax; /* 큰 쪽의 20% */
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
> 정사각형 요소를 만들 때 유용!
|
> 정사각형 요소를 만들 때 유용!
|
||||||
|
|
||||||
### ex / ch (문자 기준)
|
### ex / ch (문자 기준)
|
||||||
* ex: 소문자 x의 높이를 기준으로 크기 지정
|
* ex: 소문자 x의 높이를 기준으로 크기 지정
|
||||||
* ch: 숫자 0의 너비를 기준으로 크기 지정
|
* ch: 숫자 0의 너비를 기준으로 크기 지정
|
||||||
|
|
||||||
```css
|
```css
|
||||||
p {
|
p {
|
||||||
width: 10ch; /* 숫자 0이 10개 들어갈 크기 */
|
width: 10ch; /* 숫자 0이 10개 들어갈 크기 */
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
> 코드 블록이나 글자 기반 디자인에서 유용!
|
> 코드 블록이나 글자 기반 디자인에서 유용!
|
||||||
|
|
||||||
|
|||||||
170
docs/03_박스 모델.md
170
docs/03_박스 모델.md
@@ -12,7 +12,7 @@ CSS 박스 모델은 4개의 영역으로 구성돼.
|
|||||||
│ ┌──────────────────────────────┐ │
|
│ ┌──────────────────────────────┐ │
|
||||||
│ │ Border │ │
|
│ │ Border │ │
|
||||||
│ │ ┌────────────────────────┐ │ │
|
│ │ ┌────────────────────────┐ │ │
|
||||||
│ │ │ Padding │ │ │
|
│ │ │ Padding │ │ │
|
||||||
│ │ │ ┌──────────────────┐ │ │ │
|
│ │ │ ┌──────────────────┐ │ │ │
|
||||||
│ │ │ │ Content │ │ │ │
|
│ │ │ │ Content │ │ │ │
|
||||||
│ │ │ └──────────────────┘ │ │ │
|
│ │ │ └──────────────────┘ │ │ │
|
||||||
@@ -20,6 +20,7 @@ CSS 박스 모델은 4개의 영역으로 구성돼.
|
|||||||
│ └──────────────────────────────┘ │
|
│ └──────────────────────────────┘ │
|
||||||
└────────────────────────────────────┘
|
└────────────────────────────────────┘
|
||||||
```
|
```
|
||||||
|
|
||||||
1. Content (내용 영역)
|
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은 포함하지 않아!
|
### width / height
|
||||||
```css
|
|
||||||
div {
|
|
||||||
width: 300px;
|
|
||||||
height: 150px;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
* padding
|
width와 height는 content 영역만 조절하고, padding, border, margin은 포함하지 않아!
|
||||||
|
```css
|
||||||
|
div {
|
||||||
|
width: 300px;
|
||||||
|
height: 150px;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
```css
|
### padding
|
||||||
div {
|
|
||||||
padding: 10px; /* 모든 방향 */
|
|
||||||
padding: 10px 20px; /* 위아래 10px, 좌우 20px */
|
|
||||||
padding: 10px 15px 20px 25px; /* 시계 방향 (위, 오른쪽, 아래, 왼쪽) */
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
* border
|
```css
|
||||||
- solid : 실선
|
div {
|
||||||
- dashed : 점선
|
padding: 10px; /* 모든 방향 */
|
||||||
- dotted : 점
|
padding: 10px 20px; /* 위아래 10px, 좌우 20px */
|
||||||
- double : 이중선
|
padding: 10px 15px 20px 25px; /* 시계 방향 (위, 오른쪽, 아래, 왼쪽) */
|
||||||
- none : 없음
|
}
|
||||||
```css
|
```
|
||||||
div {
|
#### padding-top / padding-right / padding-bottom / padding-left
|
||||||
border: 3px solid red; /* 두께 3px, 실선, 빨간색 */
|
|
||||||
border-radius: 10px; /* 모서리를 둥글게 */
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
* margin
|
### border
|
||||||
|
- solid : 실선
|
||||||
|
- dashed : 점선
|
||||||
|
- dotted : 점
|
||||||
|
- double : 이중선
|
||||||
|
- none : 없음
|
||||||
|
```css
|
||||||
|
div {
|
||||||
|
border: 3px solid red; /* 두께 3px, 실선, 빨간색 */
|
||||||
|
border-radius: 10px; /* 모서리를 둥글게 */
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
```css
|
#### border-top / border-right / border-bottom / border-left
|
||||||
div {
|
|
||||||
margin: 20px; /* 모든 방향 */
|
#### border-color / border-style / border-width
|
||||||
margin: 10px auto; /* 위아래 10px, 좌우 자동 정렬 */
|
|
||||||
}
|
### margin
|
||||||
```
|
|
||||||
auto를 사용하면 가운데 정렬 가능!
|
```css
|
||||||
```css
|
div {
|
||||||
div {
|
margin: 20px; /* 모든 방향 */
|
||||||
width: 300px;
|
margin: 10px auto; /* 위아래 10px, 좌우 자동 정렬 */
|
||||||
margin: 0 auto;
|
}
|
||||||
}
|
```
|
||||||
```
|
> auto를 사용하면 가운데 정렬 가능!
|
||||||
|
```css
|
||||||
|
div {
|
||||||
|
width: 300px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
#### margin-top / margin-right / margin-bottom / margin-left
|
||||||
|
|
||||||
|
#### Margin Collapsing
|
||||||
|
|
||||||
|
여백이 서로 맞닿은 두 개의 요소가 있으면 해당 여백은 합쳐져 하나의 여백이 되어서, 그 중 가장 큰 여백의 크기가 됩니다.
|
||||||
|
|
||||||
## box-sizing
|
## box-sizing
|
||||||
|
|
||||||
기본적으로 width와 height는 content 영역만 포함하지만,
|
기본적으로 width와 height는 content 영역만 포함하지만,
|
||||||
`box-sizing: border-box;`를 사용하면 border와 padding까지 포함한 크기로 계산돼.
|
`box-sizing: border-box;`를 사용하면 border와 padding까지 포함한 크기로 계산돼.
|
||||||
|
* content-box, border-box
|
||||||
|
|
||||||
```css
|
```css
|
||||||
div {
|
div {
|
||||||
@@ -137,6 +162,7 @@ img {
|
|||||||
}
|
}
|
||||||
/* 콘텐츠가 너무 많으면 스크롤이 자동 생성됨 */
|
/* 콘텐츠가 너무 많으면 스크롤이 자동 생성됨 */
|
||||||
```
|
```
|
||||||
|
## min-width / min-height
|
||||||
|
|
||||||
## border-radius
|
## border-radius
|
||||||
border-radius 속성은 요소의 모서리를 둥글게 만들어주는 역할을 해.
|
border-radius 속성은 요소의 모서리를 둥글게 만들어주는 역할을 해.
|
||||||
@@ -144,6 +170,7 @@ border-radius 속성은 요소의 모서리를 둥글게 만들어주는 역할
|
|||||||
* 0 : (기본값) 직각 모서리
|
* 0 : (기본값) 직각 모서리
|
||||||
* px, % : 반경을 설정하여 둥근 정도 조절
|
* px, % : 반경을 설정하여 둥근 정도 조절
|
||||||
* 50% : 원형으로 만듦
|
* 50% : 원형으로 만듦
|
||||||
|
|
||||||
```css
|
```css
|
||||||
.box {
|
.box {
|
||||||
width: 150px;
|
width: 150px;
|
||||||
@@ -160,3 +187,60 @@ border-radius 속성은 요소의 모서리를 둥글게 만들어주는 역할
|
|||||||
border-radius: 50%;
|
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을 사용하면 윤곽선과 요소 사이의 간격을 조절할 수 있어.
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -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
|
## display
|
||||||
요소가 어떻게 배치되는지를 결정
|
요소가 어떻게 배치되는지를 결정
|
||||||
* block : 블록 요소 (새 줄에서 시작)
|
* block : 블록 요소 (새 줄에서 시작)
|
||||||
@@ -30,6 +42,14 @@
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Normal Flow
|
||||||
|
|
||||||
|
기본값으로 블록 수준 요소의 내용물은 자기 부모 요소의 너비 100%와 자체 내용물의 최대 높이를 갖습니다.
|
||||||
|
인라인 요소는 자체 내용물의 최대 높이와 최대 너비를 갖습니다. 인라인 요소에 너비나 높이를 설정할 수는 없습니다.
|
||||||
|
|
||||||
|
블록 요소는 마지막 요소 아래 새 줄에 나타나며, 각 요소에 주어진 margin에 의해 구분됩니다.
|
||||||
|
인라인 요소는 새로운 줄에 나타나는 대신, 다른 요소와 같은 라인에 차례로 자리 잡습니다. 다만 인접(혹은 접힌) 텍스트 콘텐츠는 해당 부모의 블록 수준 요소의 너비 내에서 자신이 자리를 잡을 수 있는 공간이 있는 경우가 해당합니다. 충분한 공간이 없을 경우 overflow되는 텍스트 또는 요소는 새로운 줄에 나타납니다.
|
||||||
|
|
||||||
## top, right, bottom, left
|
## top, right, bottom, left
|
||||||
* top : 요소를 위에서 아래로 이동
|
* top : 요소를 위에서 아래로 이동
|
||||||
* right : 요소를 오른쪽에서 왼쪽으로 이동
|
* right : 요소를 오른쪽에서 왼쪽으로 이동
|
||||||
@@ -125,6 +145,7 @@ float 속성을 사용할 때, 레이아웃이 깨지는 걸 방지하는 용도
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
} /* 넘치는 부분이 잘려서 보이지 않음 */
|
} /* 넘치는 부분이 잘려서 보이지 않음 */
|
||||||
```
|
```
|
||||||
|
### overflow-x / overflow-y
|
||||||
|
|
||||||
## visibility
|
## visibility
|
||||||
visibility 속성은 요소를 보이거나 숨길 때 사용되며, `display: none;`과의 차이가 있음!
|
visibility 속성은 요소를 보이거나 숨길 때 사용되며, `display: none;`과의 차이가 있음!
|
||||||
|
|||||||
@@ -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
|
|
||||||
|
|||||||
@@ -1,9 +1,233 @@
|
|||||||
# 글꼴 및 텍스트 스타일
|
# 글꼴 및 텍스트 스타일
|
||||||
* color
|
웹페이지에서 텍스트를 멋지게 스타일링하려면 글꼴(Font)과 텍스트(Text) 관련 CSS 속성을 잘 활용해야 해!
|
||||||
* font-family
|
|
||||||
* font-size, font-weight, font-style
|
| 속성 | 설명 |
|
||||||
* letter-spacing, word-spacing
|
|---|---|
|
||||||
* text-align, text-indent
|
| font | |
|
||||||
* text-decoration
|
| text-align | |
|
||||||
* text-transform
|
| text-decoration | |
|
||||||
* white-space
|
| 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은 `<html>` 요소를 기준으로 함.
|
||||||
|
|
||||||
|
#### 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>`) 같은 경우에 적합!
|
||||||
|
* 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) 방향을 변경합니다. 블록 크기는 항상 쓰기 모드에서 페이지에 표시되는 방향 블록입니다. 인라인 크기는 항상 문장이 표시되는 방향입니다.
|
||||||
|
|||||||
@@ -1,8 +1,210 @@
|
|||||||
# Flexbox
|
# 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
|
||||||
|
<div class="container">
|
||||||
|
<div class="item">1</div>
|
||||||
|
<div class="item">2</div>
|
||||||
|
<div class="item">3</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 부모 요소(.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
|
|
||||||
|
|||||||
23
docs/07_리스트와 테이블.md
Normal file
23
docs/07_리스트와 테이블.md
Normal file
@@ -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
|
||||||
|
|
||||||
@@ -1,6 +1,195 @@
|
|||||||
# CSS Grid
|
# CSS Grid
|
||||||
* display: grid
|
CSS Grid는 웹 페이지 레이아웃을 만들기 위한 강력한 2D(행+열) 레이아웃 시스템이야.
|
||||||
* grid-template-columns, grid-template-rows
|
> Flexbox가 1차원(가로 또는 세로) 정렬을 위한 도구라면, Grid는 2차원(가로+세로) 정렬을 위한 도구
|
||||||
* grid-column-gap, grid-row-gap
|
|
||||||
* grid-area, grid-auto-flow
|
| 컨테이너 속성 | 설명 | 옵션 |
|
||||||
* align-content, justify-content
|
|---|---|---|
|
||||||
|
| 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));
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
99
docs/09_다단 레이아웃.md
Normal file
99
docs/09_다단 레이아웃.md
Normal file
@@ -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;
|
||||||
|
} /* <h2> 요소가 여러 컬럼을 가로질러 확장됨! */
|
||||||
|
```
|
||||||
|
|
||||||
|
### column-fill
|
||||||
|
내용을 컬럼에 어떻게 배분할지 설정
|
||||||
|
* balance : 모든 컬럼을 균등하게 채움 (기본값)
|
||||||
|
* auto : 한 컬럼을 먼저 채우고 넘칠 경우 다음 컬럼으로 이동
|
||||||
|
```css
|
||||||
|
.container {
|
||||||
|
column-count: 3;
|
||||||
|
column-fill: auto;
|
||||||
|
} /* 한 컬럼이 가득 차면 다음 컬럼으로 넘어감! */
|
||||||
|
```
|
||||||
|
|
||||||
|
### break-inside
|
||||||
|
컬럼이 분할되는 부분에서 특정 요소가 잘리지 않도록 방지
|
||||||
|
* auto : 기본값 (자동 줄바꿈 허용)
|
||||||
|
* avoid : 컬럼이 나뉠 때 잘리지 않도록 방지
|
||||||
|
```css
|
||||||
|
h2 {
|
||||||
|
break-inside: avoid;
|
||||||
|
} /* <h2>가 컬럼이 바뀌는 부분에서 분리되지 않도록 설정 */
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
# 애니메이션 및 트랜지션
|
|
||||||
* transition
|
|
||||||
* animation
|
|
||||||
* keyframes
|
|
||||||
* transform
|
|
||||||
* perspective
|
|
||||||
246
docs/10_애니메이션 및 트랜지션.md
Normal file
246
docs/10_애니메이션 및 트랜지션.md
Normal file
@@ -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;
|
||||||
|
} /* 왼쪽 상단을 기준으로 원근 효과 적용! */
|
||||||
|
```
|
||||||
|
|
||||||
@@ -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와 함께 사용 가능
|
||||||
|
|
||||||
|
|
||||||
## 다크 모드 적용법
|
|
||||||
|
|
||||||
|
## 예시
|
||||||
|
### 다크 모드
|
||||||
|
```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 */
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|||||||
182
docs/12_CSS 함수.md
Normal file
182
docs/12_CSS 함수.md
Normal file
@@ -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단계로 깜빡이는 애니메이션! */
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
# 미디어 쿼리 @media
|
|
||||||
159
docs/13_미디어퀴리.md
Normal file
159
docs/13_미디어퀴리.md
Normal file
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 사용자의 시스템 설정에 따라 자동으로 다크 모드 적용! */
|
||||||
|
```
|
||||||
10
docs/14_스크롤 스냅.md
Normal file
10
docs/14_스크롤 스냅.md
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
# Scroll Snap
|
||||||
|
|
||||||
|
| 속성 | 설명 |
|
||||||
|
|---|---|
|
||||||
|
|
||||||
|
* `scroll-snap-type`
|
||||||
|
* `scroll-snap-align`
|
||||||
|
* `scroll-snap-stop`
|
||||||
|
* `scroll-margin`
|
||||||
|
* `scroll-padding`
|
||||||
10
docs/15_폼.md
Normal file
10
docs/15_폼.md
Normal file
@@ -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`
|
||||||
10
docs/16_이미지.md
Normal file
10
docs/16_이미지.md
Normal file
@@ -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`
|
||||||
|
|
||||||
|
|
||||||
6
docs/21_반응형 레이아웃.md
Normal file
6
docs/21_반응형 레이아웃.md
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
# 반응형 레이아웃
|
||||||
|
|
||||||
|
|
||||||
|
```html
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||||
|
```
|
||||||
Reference in New Issue
Block a user