|
박스 모델은 CSS가 요소의 크기와 주변 공간을 다루는 기본 구조다. 하나의 상자에는 내용 영역과 안쪽 여백과 테두리와 바깥 여백이 있다. 안쪽 여백인 `padding`은 내용과 테두리 사이의 공간을 정한다. 바깥 여백인 `margin`은 상자 밖에서 다른 요소와의 거리를 조정한다. 같은 여백처럼 보여도 어디에 속하는지에 따라 요소 사이의 관계가 달라진다. [[새로운 질서]]는 제목과 문단과 이미지도 이런 상자의 관계로 살펴볼 수 있다고 설명한다. |
| − |
`box-sizing`은 지정한 너비와 높이를 어떤 영역의 크기로 해석할지 정하는 CSS 속성이다. `border-box`를 사용하면 지정한 크기에 안쪽 여백과 테두리까지 포함해 계산할 수 있다. 상자를 추가하면 크기뿐 아니라 앞뒤 간격과 부모 안에서의 배치도 함께 고려해야 한다. 화면이 좁아지거나 내용이 늘어날 때 새 상자가 다른 요소와 어떤 관계를 맺을지도 확인해야 한다. 원고는 단순함을 비어 보이는 모양보다 계속 관리해야 할 관계를 줄이는 방법으로 설명한다. 상자의 구조를 이해하면 [[여백]]과 [[반응형 디자인]]을 감각에만 맡기지 않고 구체적으로 조정할 수 있다. |
| + |
`box-sizing`은 지정한 너비와 높이를 어떤 영역의 크기로 해석할지 정하는 CSS 속성이다. `border-box`를 사용하면 지정한 크기에 안쪽 여백과 테두리까지 포함해 계산할 수 있다. 상자를 추가하면 크기뿐 아니라 앞뒤 간격과 부모 안에서의 배치도 함께 고려해야 한다. 화면이 좁아지거나 내용이 늘어날 때 새 상자가 다른 요소와 어떤 관계를 맺을지도 확인해야 한다. 단순함은 비어 보이는 모양뿐 아니라 계속 관리해야 할 관계를 줄이는 방법으로도 생각할 수 있다. 상자의 구조를 이해하면 [[여백]]과 [[반응형 디자인]]을 감각에만 맡기지 않고 구체적으로 조정할 수 있다. |
| − |
- 출처: 민구홍, 『새로운 질서』 개정판 출간 전 원고(0901 스프레드), 「모든 것은 상자다」, 231–233쪽. |
| + |
#개념 #CSS |