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