의 캡션 |
## CSS 선택자
### 기본 선택자
| Command | Description |
|---------|-------------|
| `element` | `p { }` — 모든 요소 |
| `.class` | `.card { }` — 클래스 선택자 |
| `#id` | `#main { }` — id 선택자 |
| `*` | 전체 선택자 (모든 요소) |
### 결합자
| Command | Description |
|---------|-------------|
| `A B` | 자손 (A 안의 B) |
| `A > B` | 직접 자식만 |
| `A + B` | 인접 형제 (A 바로 뒤의 B) |
| `A ~ B` | 일반 형제 (A 뒤의 B) |
### 의사 클래스
| Command | Description |
|---------|-------------|
| `:hover` | 마우스 오버 |
| `:focus` | 요소에 포커스 |
| `:first-child` | 부모의 첫 번째 자식 |
| `:nth-child(n)` | n번째 자식 (2n=짝수, odd=홀수) |
## 박스 모델
```
.box {
margin: 10px; /* outside */
border: 1px solid #333; /* edge */
padding: 15px; /* inside */
width: 200px;
box-sizing: border-box; /* include pad+border */
}
```
### 단축 표기
| Command | Description |
|---------|-------------|
| `margin: 10px` | 모든 방향 |
| `margin: 10px 20px` | 상하 \| 좌우 |
| `margin: 10px 20px 15px` | 상 \| 좌우 \| 하 |
| `margin: 10px 20px 15px 5px` | 상 \| 우 \| 하 \| 좌 |
## Flexbox
### 컨테이너
```
.flex-container {
display: flex;
flex-direction: row; /* row | column */
justify-content: center; /* main axis */
align-items: center; /* cross axis */
gap: 10px;
flex-wrap: wrap;
}
```
### 항목 속성
| Command | Description |
|---------|-------------|
| `flex: 1` | 사용 가능한 공간을 차지하도록 늘어남 |
| `flex-grow: 2` | 형제 대비 늘어나는 비율 |
| `flex-shrink: 0` | 기본 크기 이하로 줄어들지 않음 |
| `flex-basis: 200px` | 늘어나기/줄어들기 전 초기 크기 |
| `align-self: flex-end` | 컨테이너 정렬 재정의 |
| `order: -1` | 시각적 순서 (기본값 0) |
## Grid
### 컨테이너
```
.grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto;
gap: 10px;
}
```
### 항목 배치
```
.item {
grid-column: 1 / 3; /* span col 1-2 */
grid-row: 1 / 2;
}
/* shorthand: repeat, minmax */
grid-template-columns: repeat(3, 1fr);
grid-template-columns:
repeat(auto-fit, minmax(200px, 1fr));
```
## 포지셔닝
| Command | Description |
|---------|-------------|
| `static` | 기본 흐름 (offset 속성 없음) |
| `relative` | 일반 위치에서 이동 |
| `absolute` | 가장 가까운 positioned 조상에서 이동 |
| `fixed` | 뷰포트에서 이동 (스크롤해도 고정) |
| `sticky` | 스크롤 임계점까지 relative, 그 후 fixed |
### 예시
```
.parent { position: relative; }
.child {
position: absolute;
top: 0; right: 0; /* top-right corner */
}
```
## 미디어 쿼리
```
/* Mobile-first: base styles for small screens */
.container { padding: 10px; }
@media (min-width: 768px) {
.container { max-width: 720px; }
}
@media (min-width: 1024px) {
.container { max-width: 960px; }
}
```
### 일반 중단점
| Command | Description |
|---------|-------------|
| `480px` | 소형 스마트폰 |
| `768px` | 태블릿 |
| `1024px` | 소형 데스크톱 / 가로 태블릿 |
| `1280px` | 데스크톱 |
```
### 목록
```