프론트엔드 개발자로서 CSS 상자 모델을 이해하는 것은 픽셀 단위까지 완벽한 레이아웃을 제공하기 위한 성패의 결정판입니다. 두 가지 상자 모델 유형인 콘텐츠 상자와 테두리 상자의 맥락에서 인라인 요소와 블록 요소가 어떻게 다르게 작동하는지 직접 살펴보겠습니다.

기본 사항: 상자 안에 무엇이 들어있나요?

자세한 내용을 살펴보기 전에 박스 모델이 무엇인지 요약하는 것이 좋습니다. 페이지의 모든 단일 요소는 상자입니다(예, 실제로는 상자 모양으로 보이지 않는 요소도 마찬가지입니다). 상자는 다른 상자 안에 있거나, 다른 상자를 포함하거나, 옆에 있을 수 있습니다.

박스 모델은 모든 모델에 적용되며 다음으로 구성됩니다.

• 콘텐츠 상자: 텍스트, 이미지, 가지고 있는 정보 등 실제 콘텐츠가 존재하는 HTML 요소 또는 CSS 의사 요소입니다.
• 패딩: 콘텐츠와 테두리 사이의 공간입니다.
• 테두리: 패딩과 내용을 둘러싸는 선입니다.
• 여백: 다른 요소를 밀어내는 테두리 외부 공간입니다.

따라서

인라인 요소와 블록 요소의 주요 차이점

박스 모델이 인라인 요소와 블록 요소에 미치는 영향의 주요 차이점을 이해하는 것이 중요합니다.

1. 너비: 블록 요소는 기본적으로 컨테이너를 채우기 위해 확장됩니다. 인라인 요소? 콘텐츠를 위한 충분한 공간을 차지합니다.

2. 높이: 블록 요소의 경우 패딩, 테두리 및 여백이 모두 높이를 증가시킵니다. 인라인 요소는 세로 패딩이나 테두리에 관계없이 줄 높이 내에 유지됩니다.

3. 레이아웃 영향: 블록 요소는 가로 및 세로 레이아웃 모두에 영향을 미칩니다. 인라인 요소는 수직 간격에 최소한의 영향을 미치면서 수평 흐름에 관한 것입니다.

4. 여백 축소: 여백 축소는 인접한 수직 여백이 병합될 수 있는 블록 요소에 특정한 동작입니다. 따라서 한 요소의 margin-bottom:20px는 여백 상단으로 축소될 수 있습니다. 다음 요소에 20px를 추가하여 20px 여백 하나를 생성합니다. 인라인 요소는 이 게임을 플레이하지 않습니다.

이제 상자 모델의 구성 요소와 인라인 요소와 블록 요소의 차이점을 알았으므로 콘텐츠 상자가 인라인 요소인지 블록 요소인지에 따라 상자 크기 속성이 어떻게 영향을 받는지 살펴보겠습니다.

상자 크기 조정: 콘텐츠 상자와 테두리 상자

상자 크기 조정 속성은 요소의 너비와 높이가 계산되는 방식을 제어하며 레이아웃에 큰 영향을 미칠 수 있습니다.

1. 인라인 요소가 포함된 콘텐츠 상자

상자 크기 조정 시: 콘텐츠 상자가 인라인 요소에 적용됩니다:

• 너비 및 높이: 너비는 콘텐츠에 의해서만 결정됩니다. 이 너비 위에 패딩, 테두리 및 여백이 추가됩니다.
• 레이아웃에 미치는 영향: 인라인 요소는 텍스트 흐름을 방해하지 않으므로 요소의 너비는 콘텐츠 너비만큼만 넓습니다. 수직 패딩과 테두리는 시각적으로 존재하지만 주변 선의 높이에는 영향을 주지 않습니다.

2. 블록 요소가 포함된 콘텐츠 상자

상자 크기 조정 시: 콘텐츠 상자가 블록 요소에 적용됩니다:

• 너비 및 높이: 지정된 너비 또는 높이는 콘텐츠 영역에만 적용됩니다. 이 외부에 패딩과 테두리가 추가되어 요소의 전체 크기가 늘어납니다.
• 레이아웃 영향: 달리 지정하지 않는 한 블록 요소는 기본적으로 컨테이너의 전체 너비로 확장됩니다. 패딩과 테두리는 요소의 크기를 늘려 인접한 요소를 더 멀리 밀어냅니다.

3. 인라인 요소가 있는 테두리 상자

box-sizing: border-box가 인라인 요소에 적용되는 경우:

• 너비 및 높이: 너비에는 콘텐츠, 패딩 및 테두리가 포함됩니다. 콘텐츠 영역은 지정된 너비 내에서 패딩과 테두리를 수용하도록 축소됩니다.
• 레이아웃 영향: 요소의 너비는 여전히 콘텐츠에 따라 결정되지만 이제 패딩과 테두리가 이 너비 내에 포함됩니다. 수직 패딩과 테두리는 시각적으로 그대로 유지되지만 줄 높이는 변경되지 않습니다.

4. 블록 요소가 있는 테두리 상자

box-sizing: border-box가 블록 요소에 적용되는 경우:

• 너비 및 높이: 지정된 너비와 높이에는 콘텐츠, 패딩 및 테두리가 포함됩니다. 이는 추가하는 패딩이나 테두리의 양에 관계없이 요소의 전체 크기가 지정된 크기와 일관되게 유지됨을 의미합니다.
• 레이아웃에 미치는 영향: 패딩과 테두리가 지정된 너비 내에 포함되므로 블록 요소의 크기를 더 예측하기 쉽습니다. 이렇게 하면 특히 요소를 나란히 정렬할 때 레이아웃 디자인을 더 쉽게 관리할 수 있습니다.

컨텐트 상자가 기본값이지만 테두리 상자가 더 직관적이고 가장 높은 수준의 제어 기능을 제공하는 것으로 널리 알려져 있다는 점을 강조할 가치가 있습니다.

CSS 박스 모델은 단지 강력한 개념이 아니라 프런트엔드 개발 창고의 기본 도구입니다. 박스 크기 조정이 인라인 요소와 블록 요소에 어떻게 다르게 영향을 미치는지 이해함으로써 오작동하는 레이아웃 문제를 해결하는 번거로움 없이 선명하고 기능적인 완벽한 레이아웃을 만들기 시작할 수 있습니다.

Box Model에서 이 다운로드가 마음에 드셨다면 왼쪽 상단에 있는 하트 모양 상자 위로 마우스를 가져가서 이 게시물에 대한 사랑을 보여주세요!