HTML 문서의 각 요소는 CSS에서 직사각형 상자로 처리됩니다. 이것은 기본 레이아웃 구성표이며 요구 사항에 따라 사용자 지정할 수 있습니다. 요소, 콘텐츠 및 주변 요소의 위치 지정은 CSS의 상자 모델에 따라 수행됩니다.
먼저 다음 이미지와 같이 상자 모델의 레이아웃부터 시작하겠습니다.
출처:w3.org
콘텐츠
여기에는 텍스트, 이미지 또는 기타 미디어 콘텐츠 형태의 실제 데이터가 포함됩니다. 너비 및 높이 속성은 이 상자의 크기를 수정합니다.
패딩
콘텐츠의 바깥쪽 가장자리와 테두리 사이의 공간은 패딩을 나타냅니다. 이 상자는 padding 속성으로 크기를 조정할 수 있습니다. padding-left, padding-bottom 등과 같은 가장자리별 속성은 맞춤 간격을 달성하는 데 도움이 됩니다.
테두리
패딩의 바깥쪽 가장자리와 여백의 안쪽 가장자리 사이의 거리는 요소의 테두리를 정의합니다. 기본적으로 너비는 0으로 설정되어 있습니다. border 속성은 요소의 테두리를 정의하는 데 사용됩니다. 개별 가장자리도 스타일을 지정할 수 있습니다.
여백
요소의 상자와 주변 요소의 상자 사이의 공간은 여백으로 정의됩니다. 이는 페이지 가장자리와 콘텐츠 사이의 공간으로 정의되는 페이지 여백과 유사합니다. 색상이 투명하여 요소 테두리 외부 영역을 지우는 것을 제외하고 패딩 속성을 시뮬레이션합니다. 패딩과 마찬가지로 개별 가장자리를 사용자 정의 여백을 갖도록 정의할 수 있습니다.
예시
다음 예를 고려하십시오 -
콘텐츠 데모 상자
출력
이것은 다음 출력을 생성합니다 -
여기에서 CSS 사양에서
너비 + (왼쪽+오른쪽) 패딩 + (왼쪽+오른쪽) 테두리 + (왼쪽+오른쪽) 여백 =200 + (35+35) + (20+20) + (25+25) px=360px여백과 패딩이 불필요한 공간을 추가하고 요소의 전체 너비에 추가되는 것처럼 보일 수 있지만 웹 페이지를 반응형으로 만드는 데 다양한 응용 프로그램이 있습니다. 상자 모델은 요소를 더 나은 위치에 배치하는 데 도움이 됩니다.
예시
다음 예는 CSS 상자 모델을 보여줍니다 -
출력
이것은 다음과 같은 출력을 제공합니다.
예시
<스타일>#demo { 너비:350px; 디스플레이:플렉스; 왼쪽으로 뜨다; 테두리:6px 단색 검정; 테두리 반경:6%;}.d1 { 왼쪽 여백:20px; 너비:150px; 높이:80px; 상자 그림자:0 0 0 4px mediumslateblue; 상자 크기:테두리 상자; 테두리 반경:36%;}.d2 { 너비:150px; 높이:80px; 패딩:30px; 상자 그림자:0 0 0 4px darkred; 상자 크기:테두리 상자; 테두리 반경:36%;}출력
이것은 다음과 같은 출력을 제공합니다 -
