CSS 상자 모델:방법 가이드

브라우저는 CSS 상자 모델을 사용하여 요소가 웹페이지에 표시되는 방식을 결정합니다. 상자 모델은 요소의 크기와 테두리, 패딩 및 여백을 나타냅니다. 이러한 각 요소의 스타일을 개별적으로 지정할 수 있습니다.

모든 요소는 상자로 둘러싸여 있습니다. 이러한 상자의 작동 방식을 이해할 수 있는 것은 웹 페이지에서 원하는 방식으로 항목을 배치하는 데 필수적인 부분입니다.

CSS 상자 모델은 웹 페이지에서 상자가 표시되는 방식과 위치를 결정하는 데 사용됩니다. 이 모델은 CSS에서 상자를 구성하는 4가지 구성 요소(콘텐츠, 패딩, 테두리 및 여백)를 나타냅니다. 이 튜토리얼에서는 CSS 상자 모델의 기본 사항과 주요 부분에 대해 설명합니다.

CSS 상자 모델

CSS 상자 모델은 CSS의 모든 상자에 적용되는 구조입니다. 이 상자 모델은 상자의 다른 부분이 웹 페이지에 나타날 요소를 만드는 방법에 대해 브라우저에 지시합니다. 상자 모델은 상자의 내용, 패딩, 테두리 및 여백을 나타냅니다.

상자 모델의 각 요소를 살펴보겠습니다.

콘텐츠. 텍스트, 양식, 이미지 및 기타 웹 요소가 표시되는 상자의 내용입니다.
패딩. 상자의 내용과 상자의 테두리 사이의 공간입니다. 상자의 패딩은 투명합니다.
경계. 상자의 내용 주위를 둘러싸는 테두리 또는 패딩 값이 지정된 경우 상자의 안쪽 여백을 둘러싸는 테두리입니다.
여백. 테두리의 바깥쪽 가장자리와 웹 페이지의 다른 요소 사이의 공간입니다. 상자의 패딩은 투명합니다.

이러한 구성 요소 각각과 사용 방법에 대해 하나씩 논의해 보겠습니다.

콘텐츠 영역

콘텐츠 영역은 상자 모델의 중앙에 있습니다. 여기에서 텍스트, 이미지 및 기타 요소가 웹 요소에 나타납니다. 높이 및 너비 CSS 속성을 사용하여 콘텐츠 영역의 크기를 결정합니다.

기본적으로 콘텐츠 영역의 크기는 해당 요소의 크기와 같습니다. 한 줄의 텍스트가 있는 경우 상자는 텍스트 줄만큼 길고 높이가 됩니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

높이가 200px, 너비가 200px인 상자를 디자인한다고 가정합니다. 다음 코드를 사용하여 그렇게 할 수 있습니다.

<html>


<p>This is a box.</p>

</html>

<style>

p {
	height: 200px;
	width: 200px;
}
</style>

CSS 상자 모델:방법 가이드 위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.

HTML

태그를 사용하여 텍스트 단락을 만들었습니다. 웹 디자인의 모든 요소는 상자에 있으므로 상자 모델은

태그에 적용됩니다. CSS 코드에서 모든

태그의 높이를 200px로 설정하는 규칙을 만듭니다. 또한 모든

태그의 너비를 200px로 설정했습니다.

너비와 높이, CSS 콘텐츠 영역에 대해 자세히 알아보려면 CSS 높이 및 너비에 대한 초보자 가이드를 읽어보세요.

패딩 영역

패딩 영역은 콘텐츠 영역을 확장합니다. 상자의 내용과 테두리 사이에 간격이 생깁니다. 패딩은 웹 페이지에서 배너 및 기타 공지 요소를 만드는 데 자주 사용됩니다.

상자에 패딩을 적용하려면 CSS 패딩 속성을 사용할 수 있습니다. 마지막 상자 주위에 25px 패딩을 적용한다고 가정합니다. 다음 코드를 사용하여 그렇게 할 수 있습니다.

<html>


<p>This is a box.</p>
</html>

<style>

p {
	height: 200px;
	width: 200px;
	padding: 20px;
}
</style>

CSS 상자 모델:방법 가이드 위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.

"padding" 속성을 지정하고 값을 20px로 설정했습니다. 이렇게 하면 상자의 콘텐츠 영역과 상자 테두리 사이에 20픽셀의 간격이 생깁니다.

이제 상자와 페이지 가장자리 사이에 간격이 있습니다.

국경 지역

테두리 영역은 상자의 테두리가 표시되는 위치입니다. 테두리는 패딩 외부의 컬러 윤곽선입니다. 모든 색상을 사용하여 테두리 스타일을 지정할 수 있습니다. 테두리를 위한 내장 디자인도 많이 있습니다.

상자 주위에 5px 너비의 연한 파란색 테두리를 추가한다고 가정합니다. 다음 코드를 사용하여 그렇게 할 수 있습니다.

<html>


<p>This is a box.</p>
</html>

<style>

p {
	height: 200px;
	width: 200px;
	padding: 20px;
	border: 5px solid lightblue;
}
</style>

CSS 상자 모델:방법 가이드 위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.

CSS "border" 속성을 사용하여 5px 너비의 연한 파란색 테두리를 정의합니다. 이 테두리는 한 줄 테두리를 만드는 "솔리드" 스타일을 사용합니다. 테두리는 상자의 내용과 분리되어 있습니다. 이는 상자 주위에 20px 패딩을 지정했기 때문입니다.

여백 영역

여백 영역은 상자 모델의 가장 바깥쪽 레이어입니다. 이 영역은 웹 페이지의 다른 요소와 요소를 구분하는 빈 간격을 만듭니다.

웹 페이지의 두 상자 사이에 10px 공간을 만들고 싶다고 가정합니다. 다음 코드를 사용하여 그렇게 할 수 있습니다.

<html>


<p>This is a box.</p>
<p>This is another box.</p>

</html>
<style>

p {
	height: 200px;
	width: 200px;
	padding: 20px;
	border: 5px solid lightblue;
	margin: 10px;
}
</style>

CSS 상자 모델:방법 가이드 위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.

이번에는 HTML 파일에 두 개의 상자를 지정했습니다. 그런 다음 "margin" 속성을 사용하여 상자에 10px 여백을 적용했습니다.

보시다시피 이제 상자 사이에 10px 간격이 있습니다. 이는 상자에 여백을 적용했기 때문입니다. 이렇게 하면 상자의 테두리와 웹 페이지의 다른 요소 사이에 간격이 생깁니다.

여백 영역에 대해 자세히 알아보려면 CSS 여백에 대한 자습서를 읽어보세요.

너비 및 높이 계산

초보자가 저지르는 경향이 있는 한 가지 실수는 요소의 높이와 너비가 패딩, 여백 및 테두리를 설명한다고 가정하는 것입니다. 정확하지 않습니다.

높이 및 너비 속성을 사용하면 콘텐츠 영역의 높이와 너비를 설정할 수 있습니다. 요소의 집합입니다. 이것은 웹페이지의 다른 요소를 고려하지 않습니다.

이전의 전체 상자 예제가 차지하는 공간을 알고 싶다면 빠른 계산을 실행해야 합니다. 다음은 이전 섹션의 "여백 영역" 예제에서 지정한 값입니다.

높이:200px
너비:200px
패딩:20px
여백:10px
테두리:5px

너비를 계산하기 위해 다음 공식을 사용할 수 있습니다.

200픽셀(너비) +
40px(왼쪽 및 오른쪽 패딩) +
10px(왼쪽 및 오른쪽 테두리) +
20px(왼쪽 및 오른쪽 여백)

이렇게 하면 총 270px이 됩니다. .

높이를 계산하려면 상자의 높이를 사용합니다. 또한 패딩, 테두리 및 여백에 대해 위쪽 및 아래쪽 값을 사용합니다.

결론

CSS 상자 모델은 웹 페이지에서 요소를 렌더링하는 데 사용되는 구조입니다. HTML의 모든 요소는 직사각형 상자입니다. 상자 모델은 내용, 패딩, 테두리 및 여백이 상자에 표시되는 방식을 정의합니다.

CSS로 웹 페이지를 디자인하는 방법에 대해 더 알고 싶으십니까? CSS 학습 방법 가이드를 확인하세요. 이 가이드에는 CSS에 대한 지식을 쌓는 데 사용할 수 있는 최고의 학습 리소스 목록이 포함되어 있습니다.