웹페이지에서 화면 전체를 채우는 유동형(fluid) 사이드바와 메인 콘텐츠 영역을 만들려면 html과 body 요소의 높이를 100%로 설정하는 것이 핵심입니다. 이렇게 하면 브라우저 창 크기에 관계없이 레이아웃이 항상 전체 화면을 차지하게 됩니다.
아래 예제는 display: table과 display: table-cell 속성을 활용하여 사이드바와 메인 영역을 나란히 배치하는 방법을 보여줍니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
html,body {
height: 100%;
color: white;
font-size: 2em;
line-height: 200px;
}
#parent {
display: table;
width: 100%;
height: 100%;
}
#side {
display: table-cell;
background-color: turquoise;
width: 20%;
vertical-align: top;
box-shadow: inset 0 0 10px black;
}
#main {
display: table-cell;
width: 80%;
background: url("https://images.unsplash.com/photo-1611944444060-b50a1d80cfe6?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=800&ixlib=rb1.2.1&q=80&w=600");
}
</style>
</head>
<body>
<div id="parent">
<div id="side">Side</div>
<div id="main">Main</div>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
코드 설명
- html, body { height: 100%; } — 문서 전체의 높이를 브라우저 화면 높이와 동일하게 설정하여 자식 요소가 전체 화면을 채울 수 있도록 합니다.
- #parent { display: table; } — 부모 컨테이너를 테이블처럼 동작하게 하여 내부 요소들을 가로로 배치합니다.
- #side { display: table-cell; width: 20%; } — 사이드바를 테이블 셀로 만들어 부모 너비의 20%를 차지하며,
vertical-align: top으로 상단 정렬하고box-shadow로 입체적인 음영 효과를 줍니다. - #main { display: table-cell; width: 80%; } — 메인 콘텐츠 영역이 나머지 80%를 차지하며 배경 이미지가 적용됩니다.
참고: 최신 방식인 Flexbox 활용하기
display: table 방식은 구형 브라우저와의 호환성이 좋지만, 최신 프로젝트에서는 Flexbox를 사용하는 것이 더 권장됩니다. 아래처럼 간결하게 같은 레이아웃을 구현할 수 있습니다.
#parent {
display: flex;
width: 100%;
height: 100vh;
}
#side {
width: 20%;
background-color: turquoise;
}
#main {
width: 80%;
}height: 100vh는 뷰포트(화면) 전체 높이를 의미하므로, 별도로 html과 body의 높이를 지정하지 않아도 됩니다. Flexbox는 반응형 디자인과 정렬 제어에 더 유연하므로 새로운 프로젝트에서는 이 방식을 사용하는 것이 좋습니다.