247 lines
7.5 KiB
Markdown
247 lines
7.5 KiB
Markdown
# Box Model
|
|
|
|
웹페이지의 모든 요소는 박스(Box) 형태로 표시돼.
|
|
이 박스를 구성하는 요소들을 **박스 모델(Box Model)**이라고 해.
|
|
HTML 요소가 실제로 화면에서 차지하는 크기를 결정하는 가장 중요한 개념이야.
|
|
|
|
## 박스 모델의 4가지 영역
|
|
CSS 박스 모델은 4개의 영역으로 구성돼.
|
|
```css
|
|
┌────────────────────────────────────┐
|
|
│ Margin │
|
|
│ ┌──────────────────────────────┐ │
|
|
│ │ Border │ │
|
|
│ │ ┌────────────────────────┐ │ │
|
|
│ │ │ Padding │ │ │
|
|
│ │ │ ┌──────────────────┐ │ │ │
|
|
│ │ │ │ Content │ │ │ │
|
|
│ │ │ └──────────────────┘ │ │ │
|
|
│ │ └────────────────────────┘ │ │
|
|
│ └──────────────────────────────┘ │
|
|
└────────────────────────────────────┘
|
|
```
|
|
|
|
1. Content (내용 영역)
|
|
|
|
* 요소의 **실제 내용(텍스트, 이미지 등)**이 들어가는 공간.
|
|
* width, height 속성으로 크기 조절 가능.
|
|
|
|
2. Padding (안쪽 여백)
|
|
|
|
* 내용과 테두리(Border) 사이의 여백.
|
|
* 요소의 내부 여백을 조절하는 역할.
|
|
* padding 속성 사용
|
|
|
|
3. Border (테두리)
|
|
* 요소를 감싸는 경계선.
|
|
* border 속성 사용
|
|
|
|
4. Margin (바깥 여백)
|
|
* 요소와 다른 요소 사이의 거리를 조정하는 여백.
|
|
* margin 속성 사용
|
|
|
|
## 박스 모델 속성
|
|
|
|
| 속성 | 설명 | 옵션 |
|
|
|---|---|---|
|
|
| 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
|
|
|
|
width와 height는 content 영역만 조절하고, padding, border, margin은 포함하지 않아!
|
|
```css
|
|
div {
|
|
width: 300px;
|
|
height: 150px;
|
|
}
|
|
```
|
|
|
|
### padding
|
|
|
|
```css
|
|
div {
|
|
padding: 10px; /* 모든 방향 */
|
|
padding: 10px 20px; /* 위아래 10px, 좌우 20px */
|
|
padding: 10px 15px 20px 25px; /* 시계 방향 (위, 오른쪽, 아래, 왼쪽) */
|
|
}
|
|
```
|
|
#### padding-top / padding-right / padding-bottom / padding-left
|
|
|
|
### border
|
|
- solid : 실선
|
|
- dashed : 점선
|
|
- dotted : 점
|
|
- double : 이중선
|
|
- none : 없음
|
|
```css
|
|
div {
|
|
border: 3px solid red; /* 두께 3px, 실선, 빨간색 */
|
|
border-radius: 10px; /* 모서리를 둥글게 */
|
|
}
|
|
```
|
|
|
|
#### border-top / border-right / border-bottom / border-left
|
|
|
|
#### border-color / border-style / border-width
|
|
|
|
### margin
|
|
|
|
```css
|
|
div {
|
|
margin: 20px; /* 모든 방향 */
|
|
margin: 10px auto; /* 위아래 10px, 좌우 자동 정렬 */
|
|
}
|
|
```
|
|
> auto를 사용하면 가운데 정렬 가능!
|
|
```css
|
|
div {
|
|
width: 300px;
|
|
margin: 0 auto;
|
|
}
|
|
```
|
|
#### margin-top / margin-right / margin-bottom / margin-left
|
|
|
|
#### Margin Collapsing
|
|
|
|
여백이 서로 맞닿은 두 개의 요소가 있으면 해당 여백은 합쳐져 하나의 여백이 되어서, 그 중 가장 큰 여백의 크기가 됩니다.
|
|
|
|
## box-sizing
|
|
|
|
기본적으로 width와 height는 content 영역만 포함하지만,
|
|
`box-sizing: border-box;`를 사용하면 border와 padding까지 포함한 크기로 계산돼.
|
|
* content-box, border-box
|
|
|
|
```css
|
|
div {
|
|
width: 200px;
|
|
height: 100px;
|
|
padding: 20px;
|
|
border: 5px solid black;
|
|
box-sizing: border-box;
|
|
}
|
|
```
|
|
요소의 실제 크기를 더 쉽게 관리할 수 있어!
|
|
|
|
## max-width / max-height
|
|
max-width 속성은 요소가 가질 수 있는 최대 너비를 제한하는 역할을 해. 콘텐츠가 너무 커지지 않도록 조절할 때 사용돼.
|
|
|
|
max-height 속성은 요소의 최대 높이를 제한하는 역할을 해.
|
|
max-width와 같은 원리로 콘텐츠가 너무 높아지는 걸 방지할 때 사용돼.
|
|
|
|
* none : (기본값) 최대 너비/높이 제한 없음
|
|
* px, %, em, rem : 특정 단위로 최대 너비/높이 설정
|
|
|
|
```css
|
|
.box {
|
|
width: 100%;
|
|
max-width: 600px;
|
|
background-color: lightblue;
|
|
}
|
|
/* width: 100%이지만 최대 600px까지만 확장됨 (화면이 작으면 줄어들고, 커지면 600px에서 멈춤) */
|
|
```
|
|
```css
|
|
img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
/* 반응형 이미지: 이미지가 부모 요소보다 커지지 않도록 제한 (화면 크기에 맞춰 자동 조정됨) */
|
|
```
|
|
```css
|
|
.content {
|
|
max-height: 300px;
|
|
overflow: auto;
|
|
}
|
|
/* 콘텐츠가 너무 많으면 스크롤이 자동 생성됨 */
|
|
```
|
|
## min-width / min-height
|
|
|
|
## border-radius
|
|
border-radius 속성은 요소의 모서리를 둥글게 만들어주는 역할을 해.
|
|
네모난 요소를 부드러운 디자인으로 바꿀 때 필수!
|
|
* 0 : (기본값) 직각 모서리
|
|
* px, % : 반경을 설정하여 둥근 정도 조절
|
|
* 50% : 원형으로 만듦
|
|
|
|
```css
|
|
.box {
|
|
width: 150px;
|
|
height: 150px;
|
|
background-color: steelblue;
|
|
border-radius: 20px;
|
|
} /* 20px만큼 모서리가 둥글게 처리됨 */
|
|
```
|
|
```css
|
|
.circle {
|
|
width: 100px;
|
|
height: 100px;
|
|
background-color: tomato;
|
|
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을 사용하면 윤곽선과 요소 사이의 간격을 조절할 수 있어.
|
|
|
|
|