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 |
Tags
- PX
- box-sizing
- flex
- Justify
- boxmodel
- WebProgramming
- css
- Media
- REM
- font-size
- clonecoding
- flexbox
- Block
- google클론코딩
- mediaquery
- margin-collapsing
- MARGIN
- inline
- justify-content
- border-box
- 마진겹침
- html
- EM
- content-box
- Align
- JavaScript
- align-items
- box-shadow
- inline-block
- 클론코딩
Archives
- Today
- Total
목록box-sizing (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