CSS 시리즈 - 5부: 박스 모델

소개

개별 HTML 요소를 더 큰 페이지 레이아웃 내의 상자로 생각하거나 중첩된 자식이 있는 부모 컨테이너의 경우 여러 HTML 요소 상자를 포함하는 상자 모양의 컨테이너로 생각하는 것이 종종 유용합니다. 디자이너는 이러한 상자가 표시되고 서로 상호 작용하는 방식을 조정할 수 있습니다.

상자 모델은 이를 수행할 수 있는 방법을 시각화하는 개념적 프레임워크입니다.

CSS 상자 모델 이해

아래 이미지에서 흰색 상자는 HTML 요소를 나타냅니다. 브라우저 내에서 jpeg 파일을 렌더링하는 HTML 이미지 태그라고 상상해 봅시다.


이 jpeg 이미지는 상자 모델의 콘텐츠이므로 이미지는 위의 흰색 상자로 표시됩니다. 안쪽 여백, 테두리 및 여백은 이제 이 이미지와 연결된 에 적용할 수 있는 CSS 속성입니다. 디자인 요구 사항에 맞게 조정할 수 있습니다. 이제 이 이미지에 적용할 수 있는 세 가지 속성이 있습니다.

img {
    padding: 0px 0px;
    border: none;
    margin: 0px 0px;
    }

테두리 이해

테두리는 이미지 주변의 경계이며 본질적으로 가장자리 또는 윤곽선입니다. CSS 테두리 선언에는 스타일을 효율적으로 정의할 수 있는 특정 구문이 있습니다. 다음과 같습니다.
테두리: 너비 및 테두리 스타일(필수) 및 색상
실제로는 다음과 같습니다.

img {
    border: 5px solid black;
}

위의 테두리 선언에서 이미지에 너비가 5픽셀인 검은색 테두리를 지정했습니다. 경계 속성과 관련된 속성 값 유형에 대한 자세한 내용은 MDN CSS: border을 참조하십시오.

패딩 이해

패딩은 콘텐츠와 테두리 사이의 공간입니다. 패딩은 여러 방법으로 조정할 수 있습니다.

img {
    padding-top: 5px;
    padding-right: 20px
    padding-bottom: 10px;
    padding-left: 0px;
    }

위의 패딩 선언은 각 면에 패딩 너비와 높이를 개별적으로 할당합니다. 다음과 같이 속기로 동일한 패딩 치수를 얻을 수 있습니다.

img {
   padding: 5px 20px 10px 0;
}

위의 예에서 속기는 padding-top을 설정하여 시작한 다음 거기에서 시계 방향으로 진행합니다. 더 제한적인 또 다른 속기 방법은 다음과 같습니다.

img {
    padding: 5px 10px;
    }

위의 코드에서:
5px는 상단 및 하단 패딩에 적용됩니다.
10px는 왼쪽 및 오른쪽 패딩에 적용됩니다.

마진 이해

여백은 콘텐츠의 테두리와 인접한 HTML 요소 사이의 간격입니다. 속성 선언은 패딩과 동일합니다. 속기 방법에 auto를 사용하면 구성 요소가 중앙에 배치되는 경우가 많습니다. 코드는 다음과 같습니다.

.my-component {
    width: 400px;
    height: 400px;
    margin: 20px auto;
}

위의 코드는 20px의 위쪽 및 아래쪽 여백을 가지며 auto 속성 값은 왼쪽 및 오른쪽 여백이 항상 동일하도록 구성 요소를 중앙에 배치합니다.

높이와 너비 이해

대부분의 경우 특정 높이 또는 너비를 가진 구성 요소가 필요할 수 있습니다. 따라서 패딩, 여백 및 테두리가 구성 요소의 크기에 어떤 영향을 미치는지 이해하는 것이 중요합니다. 다음 예를 살펴보겠습니다.

.my-content {
    width: 400px;
    height: 200px;
    padding: 10px 10px;
    margin: 20px 5px;
    border: 5px solid red;
}

위의 예에서 구성 요소 너비가 400px라고 생각할 수 있습니다. 그러나 이것은 사실이 아닙니다. 패딩, 여백 및 테두리가 너비와 높이에 추가됩니다. 따라서 속기를 사용할 때 첫 번째 값이 상단과 하단에 적용된다는 점을 기억하세요. 높이가 200px + (10px * 2) + (20px * 2) + (5px * 2)이므로 전체 높이는 270px입니다. 패딩, 여백, 테두리 크기는 모두 위쪽과 아래쪽에 적용되기 때문에 두 번 추가합니다.

이 동작을 변경하는 CSS 속성이 있습니다. border-box 속성 값과 함께 사용되는 box-sizing 속성에는 요소의 전체 너비와 높이에 패딩과 테두리가 포함됩니다. 아래 예를 참조하십시오.

.my-content {
    box-sizing: border-box;
    width: 400px;
    height: 200px;
    padding: 10px 10px;
    margin: 20px 5px;
    border: 5px solid red;
}

위의 예에서 패딩과 테두리는 선언된 너비와 높이 안에 추가됩니다. 즉, 계산된 높이는 200px + 20px + 20px 또는 240px가 됩니다.

결론

방금 CSS Box 모델, border 속성, padding 속성, margin 속성, box-sizing 속성에 대해 배웠고 HTML 요소가 브라우저에서 렌더링되는 방식을 변경할 수 있는 방법에 대해 어느 정도 익숙해졌습니다.