관리자 홈페이지 레이아웃 샘플 코드
content 영역만 스크롤 기능
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>고정 헤더 + 고정 사이드바 + 부분 스크롤</title>
<style>
html, body {
margin: 0;
height: 100%;
overflow: hidden;
font-family: sans-serif;
}
/* 고정 헤더 */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
background-color: #ccc;
z-index: 1000;
}
/* 고정 사이드바 */
.sidebar {
position: fixed;
top: 60px;
left: 0;
width: 100px;
height: calc(100% - 60px);
background-color: #913a70;
z-index: 999;
}
/* 콘텐츠 영역 */
.content {
position: absolute;
top: 60px;
left: 100px;
right: 0;
bottom: 0;
background-color: white;
}
/* 고정된 내부 영역 (content 안에서 상단 고정) */
.fixed-inner {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 150px;
background-color: #f9f9f9;
border-bottom: 1px solid #ccc;
z-index: 10;
padding: 10px;
}
/* 실제 스크롤되는 영역 */
.scrollable-inner {
position: absolute;
top: 150px; /* 고정 영역 아래부터 */
left: 0;
right: 0;
bottom: 0;
overflow: auto;
padding: 20px;
box-sizing: border-box;
}
.big-box {
width: 2000px; /* 가로 스크롤 유도 */
height: 1500px; /* 세로 스크롤 유도 */
background-color: #eee;
font-size: 24px;
color: #333;
}
</style>
</head>
<body>
<div class="header">헤더</div>
<div class="sidebar"></div>
<div class="content">
<div class="fixed-inner">
👆 이 부분은 고정된 150px 높이의 콘텐츠입니다.
</div>
<div class="scrollable-inner">
<div class="big-box">
📄 여기가 가로 세로 스크롤되는 콘텐츠입니다.<br><br>
(내용을 많이 넣어보세요!)
</div>
</div>
</div>
</body>
</html>
'[ Web 관련 ] > HTML, CSS' 카테고리의 다른 글
| button 태그 - 기본적으로 submit 기능 있음 (0) | 2025.05.20 |
|---|---|
| <button type="button"> button 태그는 기본적으로 submit속성을 가지고 있음 (0) | 2023.08.23 |
| textarea 에서 줄바꿈 적용 (0) | 2023.03.02 |
| 모바일 사파리에 비디오(MP4) 실행 안되는 경우 (또는 인라인 재생안되는 경우) (0) | 2023.02.14 |
| placeholder 텍스트 컬러 스타일 (0) | 2022.12.05 |
