CSS를 통해 배경색과 요소 간의 간격을 조정하여 div 및 기타 컨테이너의 스타일을 지정하는 방법을 살펴보세요.

CSS 스타일을 사용하면 HTML 요소에 색상을 추가하고 위치를 조정하는 등 다양한 스타일을 지정할 수 있습니다. CSS를 추가하여 각 요소의 모양을 세밀하게 조정하고 레이아웃을 체계적으로 구성함으로써 페이지 전반의 시각 디자인을 개선합니다.

여백과 패딩의 의미는 다음 CSS 상자 모델을 참조하십시오. 일반적으로 사용되는 이 모델은 다양한 CSS 레이아웃 속성으로 스타일이 지정된 HTML 요소를 보여줍니다.

header {
background-color:#FFFFFF;
...
}
#main {
background-color:#FFFFFF;
...
}
#sidebar {
background-color:#FFFFFF;
...
}
footer {
background-color:#2F4666;
...
}

섹션 높이를 지정하려면 height 속성을 추가합니다. #main 과 #sidebar 선택기에서 높이를 250px 로 설정합니다.

#main {
...
height:250px;
...
}
#sidebar {
...
height:250px;
...
}

padding 속성을 추가하면 요소 테두리 안에 있는 콘텐츠 주위에 공간이 만들어집니다. #main 과 #sidebar 섹션의 패딩을 25px 로 설정하면 콘텐츠 주위의 4개 면 모두에 25px의 패딩이 추가됩니다.

#main {
...
padding:25px;
...
}
#sidebar {
...
padding:25px;
...
}

header {
...
padding:1px 0px 1px 0px;
...
}
footer {
...
padding:15px 0px 15px 0px;
...
}

#main {
...
margin:10px 50px 20px 0px;
...
}
#sidebar {
...
margin:10px 0px 20px 50px;
...
}

header {
...
margin:10px 50px 20px 50px;
...
}
footer {
...
margin:0px 50px 0px 50px;
...
}