CSS 프레임워크 모델
CSS 프레임워크 모델
모든 HTML 요소는 사각형으로 간주될 수 있습니다. CSS에서 설계와 레이아웃에 대해 논할 때, '박스 모델' 또는 '박스 모델'이라는 용어를 사용합니다.
CSS 프레임 모델은 각 HTML 요소를 둘러싼 프레임입니다. 이는 외간격, 테두리, 내간격 및 실제 내용을 포함합니다. 아래 그림은 프레임 모델을 보여줍니다：
다른 부분에 대한 설명:
- 내용 - 프레임의 내용, 그 중에 텍스트와 이미지가 표시됩니다.
- 내간격 - 내용 주위의 영역을 지우는 것. 내간격은 투명합니다.
- 테두리 - 내간격과 내용의 테두리를 둘러싸는 것.
- 외간격 - 경계 이외의 영역을 지우는 것. 외간격은 투명합니다.
프레임 모델은 요소 주위에 테두리를 추가하고, 요소 간의 공간을 정의할 수 있게 합니다.
요소 프레임의 가장 내부는 실제 내용이며, 내용을 직접 둘러싸고 있는 것은 내간격입니다. 내간격은 요소의 배경을 표현합니다. 내간격의 외곽은 테두리입니다. 테두리 이외는 외간격입니다. 외간격은 기본적으로 투명이며, 이는 그 뒤의 어떤 요소도 가려지지 않도록 합니다.
힌트:배경은 내용과 내간격, 테두리로 구성된 영역에 적용됩니다.
내간격, 테두리, 외간격은 선택 사항입니다. 기본 값은 0입니다. 그러나 많은 요소는 사용자代理 스타일 시트에 의해 외간격과 내간격이 설정됩니다. 요소의 margin과 padding를 0으로 설정하여 이러한 브라우저 스타일을 덮을 수 있습니다. 이는 각각 별도로 수행할 수 있으며, 전용 선택자를 사용하여 모든 요소에 대해 설정할 수도 있습니다：
* {
margin: 0;
padding: 0;
}
CSS에서 width와 height는 내용 영역의 너비와 높이를 의미합니다. 내간격, 테두리, 외간격을 추가하면 내용 영역의 크기를 영향을 미치지 않지만, 요소 프레임의 전체 크기를 증가시킵니다.
정의된 각 가장자리에 10픽셀의 외간격과 5픽셀의 내간격이 있습니다. 이 요소 프레임이 100픽셀이 되기를 원한다면, 내용의 너비를 70픽셀로 설정해야 합니다. 아래 그림을 참조하세요：
#box {
width: 70px;
margin: 10px;
padding: 5px;
}
힌트:내간격, 테두리, 외간격은 요소의 모든 가장자리에 적용될 수 있으며, 단일 가장자리에만 적용될 수도 있습니다.
힌트:외간격은 음수 값일 수 있으며, 많은 경우 음수 외간격을 사용합니다.
예제
프레임 모델을 시연합니다：
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
요소의 너비와 높이
모든 브라우저에서 요소의 너비와 높이를 올바르게 설정하려면, 프레임 모델이 어떻게 작동하는지 이해해야 합니다.
중요 사항:CSS를 사용하여 요소의 width와 height 속성을 설정할 때, 내용 영역의 너비와 높이만 설정하면 됩니다. 요소의 전체 크기를 계산하려면, 내간격, 테두리, 외간격을 더해야 합니다.
예제
<div> 요소의 총 너비는 350px가 될 것입니다：
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
계산 결과:
320px(너비) + 20px(좌+우 내간격) + 10px(좌+우 테두리) + 0px(좌+우 외간격) = 350px
요소의 전체 너비는 다음과 같이 계산되어야 합니다:
요소의 전체 너비 = 너비 + 좌 내간격 + 우 내간격 + 좌 테두리 + 우 테두리 + 좌 외간격 + 우 외간격
요소의 전체 높이는 다음과 같이 계산되어야 합니다:
요소 전체 높이 = 높이 + 상 내간격 + 하 내간격 + 상 테두리 + 하 테두리 + 상 외간격 + 하 외간격
