CSS를 통해 배경색과 요소 간의 간격을 조정하여 div 및 기타 컨테이너의 스타일을 지정하는 방법을 살펴보세요.
필요 항목
CSS 스타일을 사용하면 HTML 요소에 색상을 추가하고 위치를 조정하는 등 다양한 스타일을 지정할 수 있습니다. CSS를 추가하여 각 요소의 모양을 세밀하게 조정하고 레이아웃을 체계적으로 구성함으로써 페이지 전반의 시각 디자인을 개선합니다.
여백과 패딩의 의미는 다음 CSS 상자 모델을 참조하십시오. 일반적으로 사용되는 이 모델은 다양한 CSS 레이아웃 속성으로 스타일이 지정된 HTML 요소를 보여줍니다.
시작하기 전에
프로젝트 파일을 다운로드하고 저장합니다. Dreamweaver에서 style_containers_practice.html을 엽니다.
작업 영역의 왼쪽 상단에 있는 style_containers_practice.css를 클릭하고 분할 뷰로 전환합니다.
페이지 섹션에 색상 추가
header 선택기를 찾습니다. 이 요소의 색상을 변경하려면 background-color 속성을 추가합니다. background-color 속성 뒤에 콜론을 입력하면 컨텍스트 메뉴가 표시됩니다. 메뉴에서 색상(Color)을 선택합니다. 팔레트에서 색상 선택기를 움직여 원하는 색상을 찾거나 16진수를 직접 입력합니다.
header, #main, #sidebar 섹션의 배경색을 #FFFFFF로 설정하고 footer의 배경색을 #2F4666으로 설정합니다.
CSS
header {
background-color:#FFFFFF;
...
}
#main {
background-color:#FFFFFF;
...
}
#sidebar {
background-color:#FFFFFF;
...
}
footer {
background-color:#2F4666;
...
}
섹션 높이 조정
섹션 높이를 지정하려면 height 속성을 추가합니다. #main과 #sidebar 선택기에서 높이를 250px로 설정합니다.
CSS
#main {
...
height:250px;
...
}
#sidebar {
...
height:250px;
...
}
패딩 추가
padding 속성을 추가하면 요소 테두리 안에 있는 콘텐츠 주위에 공간이 만들어집니다. #main과 #sidebar 섹션의 패딩을 25px로 설정하면 콘텐츠 주위의 4개 면 모두에 25px의 패딩이 추가됩니다.
CSS
#main {
...
padding:25px;
...
}
#sidebar {
...
padding:25px;
...
}
패딩 추가(계속)
또한 위쪽, 오른쪽, 아래쪽, 왼쪽의 패딩 값을 개별적으로 변경할 수 있습니다. 1px 0px 1px 0px을 header 섹션의 padding 속성에 추가합니다. 그러면 콘텐츠와 요소 위쪽 사이에 1px, 오른쪽에 0px, 아래쪽에 1px, 왼쪽에 0px의 패딩이 추가됩니다.
footer 섹션의 패딩을 15px 0px 15px 0px로 설정합니다.
CSS
header {
...
padding:1px 0px 1px 0px;
...
}
footer {
...
padding:15px 0px 15px 0px;
...
}
여백 추가
margin 속성을 추가하면 요소 테두리 주위에 투명한 공간이 만들어집니다. #main 섹션의 여백을 10px 50px 20px 0px로 설정하면 요소의 위쪽 주위에 10px, 오른쪽에 50px, 아래쪽에 20px, 왼쪽에 0px의 여백이 추가됩니다.
#sidebar 섹션의 여백을 10px 0px 20px 50px로 설정합니다.
CSS
#main {
...
margin:10px 50px 20px 0px;
...
}
#sidebar {
...
margin:10px 0px 20px 50px;
...
}
여백 추가(계속)
margin 속성을 나머지 요소에 추가하여 레이아웃을 완성합니다.
header 섹션의 여백을 10px 50px 20px 50px , footer 섹션의 여백을 0px 50px 0px 50px로 설정합니다.
CSS
header {
...
margin:10px 50px 20px 50px;
...
}
footer {
...
margin:0px 50px 0px 50px;
...
}
브라우저에서 미리보기(Preview in Browser)를 클릭하여 원하는 브라우저를 선택하고 스타일이 적용된 레이아웃을 확인합니다.
변경 내용을 확인하려면 파일을 저장해야 합니다.
