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