elex/css-examples
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

2025-02-03T19:29:18

Browse Source
This commit is contained in:
Elex
2025-02-03 19:29:18 +09:00
parent 7936270d10
commit 3d9e93ae42
9 changed files with 545 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
docs/03_박스 모델.md
View File

@@ -53,7 +53,6 @@ CSS 박스 모델은 4개의 영역으로 구성돼.
| min-width / min-height | 요소의 최소 크기 지정 | none, inherit |
| border-radius | 요소의 모서리를 둥글게 만듦 | |
| box-shadow | 요소의 그림자 효과 설정 | |
| outline | 요소의 외곽선 | |
### width / height
@@ -230,17 +229,4 @@ box-shadow: [x-offset] [y-offset] [blur-radius] [spread-radius] [color] [inset];
}
```
## outline
outline 속성은 요소의 테두리(윤곽선)를 강조하는 데 사용돼. border와 비슷하지만, 요소의 크기에 영향을 주지 않으며, 바깥쪽에 별도의 선을 추가하는 효과가 있어!
* border와 다르게 요소의 크기에 영향을 주지 않음
* 보통 포커스된 입력 필드나 접근성(Accessibility) 개선을 위해 사용됨
```css
.box {
outline: 3px solid green;
outline-offset: 5px;
}
```
### outline-width / outline-style / outline-color / outline-offset
outline은 기본적으로 요소 바로 바깥쪽에 위치하지만, outline-offset을 사용하면 윤곽선과 요소 사이의 간격을 조절할 수 있어.