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