Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- css
- box-sizing
- box-shadow
- inline-block
- REM
- Justify
- WebProgramming
- Block
- font-size
- Align
- 클론코딩
- align-items
- mediaquery
- html
- border-box
- PX
- justify-content
- boxmodel
- EM
- flexbox
- Media
- inline
- clonecoding
- content-box
- flex
- MARGIN
- google클론코딩
- JavaScript
- margin-collapsing
- 마진겹침
Archives
- Today
- Total
목록border-box (1)
Suhenism
[CSS] box-sizing: content-box / border-box
box-sizing 웹을 제작하면서 width와 padding, border를 적절하게 설정했는데도 생각했던 것과 다소 다르게 나올 때가 있다. 사람은 당연하게 생각하지만 컴퓨터는 당연하게 보지 않는 부분, 'box-sizing'이다. HTML Parent Container Child Container CSS .parent-container { border: 10px solid cornflowerblue; width: 300px; height: 150px; } .child-container { width: 100%; border: 10px solid pink; padding: 5px; } 위 코드 대로 웹페이지를 만들면 우린 다음과 같이 나올 것을 기대한다. 좌우가 딱 맞아떨어진다. 코딩을 할 때 항상 ..
Coding 코딩/CSS
2022. 9. 8. 20:42