화면 전체 높이를 차지하는 페이지에서 왼쪽에는 고정된 사이드바를, 오른쪽에는 자유롭게 스크롤되는 콘텐츠 영역을 배치하고 싶다면 height: 100% 설정과 적절한 위치 지정(positioning)만으로 손쉽게 구현할 수 있습니다. 아래 예제를 통해 실제 동작 방식을 단계별로 살펴보겠습니다.
구현 핵심 포인트
- 사이드바 고정:
position: fixed;와top: 0; left: 0;을 지정해 브라우저 창 왼쪽에 사이드바를 고정합니다. - 전체 높이 유지: 사이드바에
height: 100%;를 적용해 화면 세로 끝까지 꽉 차게 만듭니다. - 본문 영역 확보: 고정된 사이드바에 내용이 가려지지 않도록 메인 콘텐츠에 사이드바 너비만큼
margin-left: 140px;을 지정합니다. - 링크 인터랙션:
:hover가상 클래스를 활용해 마우스 오버 시 색상·글자 크기·내부 그림자가 변하는 효과를 더합니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
.main {
margin-left: 140px;
font-size: 200%;
padding: 0 3%;
}
section {
height: 400px;
background-color: tomato;
}
.sidebar {
height: 100%;
width: 140px;
top: 0;
left: 0;
position: fixed;
background-color: darkslategrey;
padding-top: 20px;
}
.sidebar a {
display: block;
padding: 2% 4%;
text-decoration: none;
color: lightblue;
font-size: 1.4em;
}
.sidebar a:hover {
color: mistyrose;
font-size: 1.8em;
box-shadow: inset 0 0 15px rgba(0,0,0,0.6)
}
</style>
</head>
<body>
<div class="sidebar">
<a href="#">Option a</a>
<a href="#">Option b</a>
<a href="#">Option c</a>
<a href="#">Option d</a>
<a href="#">Option e</a>
</div>
<div class="main">
<h3>Example</h3>
<article><p>Vivamus non elementum felis. Sed sagittis lectus ligula, maximus interdum eros lacinia non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id purus neque. Donec auctor mollis vehicula. Nulla luctus mauris ut gravida interdum. Aenean vel hendrerit massa, vel feugiat dui.</p>
<img src="https://images.unsplash.com/photo-1611670159228-eff9d9e5b3a1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb1.2.1&q=80&w=200" />
<p>Phasellus ac felis consectetur lectus varius gravida ac in nunc. Suspendisse ut velit sagittis, mattis nibh eu, semper massa. Maecenas in ligula fringilla, tristique libero sit amet, convallis ex. Sed condimentum id nulla non dignissim. Vestibulum sollicitudin eros id varius ornare.</p></article>
<section></section>
</div>
</body>
</html>
실행 결과
위 코드를 브라우저에서 실행하면 다음과 같은 화면을 확인할 수 있습니다. 왼쪽 사이드바는 스크롤과 무관하게 항상 고정되어 있으며, 오른쪽 콘텐츠 영역만 위아래로 스크롤됩니다.
마무리
이 패턴은 관리자 대시보드, 기술 문서 사이트, 블로그처럼 탐색 메뉴를 항상 화면에 노출해야 하는 레이아웃에 널리 사용됩니다. 반응형 웹이 필요하다면 미디어 쿼리를 추가해 모바일 환경에서는 사이드바를 상단 내비게이션이나 햄버거 메뉴 형태로 전환하는 방식으로 확장할 수도 있습니다.