반응형

고정된 Header, 고정된 Left Sidebar, 또는 둘 다 고정된 상태에서 Body 콘텐츠만 스크롤되도록 구현하는 것은 웹사이트의 기본적인 UI 패턴 중 하나입니다. 이 글에서는 다양한 고정 및 스크롤 설정을 단계별로 구현하는 예제를 상세히 설명합니다.

1. Header 고정 및 Body 스크롤

구조 설명

  • Header는 상단에 고정됩니다.
  • Body 콘텐츠는 스크롤됩니다.

HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fixed Header Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>고정된 Header</header>
  <main>
    <section class="content">
      <h1>Scrollable Content</h1>
      <p>여기에 스크롤 가능한 본문 내용이 들어갑니다.</p>
      <!-- 반복되는 더미 텍스트 -->
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
      <p>(이하 100개의 더미 텍스트를 삽입)</p>
    </section>
  </main>
</body>
</html>

CSS 코드

/* style.css */
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #4CAF50;
  color: white;
  text-align: center;
  line-height: 60px;
  z-index: 1000;
}

main {
  margin-top: 60px; /* Header 높이만큼 마진 추가 */
  padding: 20px;
  height: calc(100vh - 60px); /* 화면 높이에서 Header를 뺀 값 */
  overflow-y: auto; /* 세로 스크롤 활성화 */
}

.content {
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
}

설명

  1. Header:
    • position: fixed로 화면 상단에 고정.
    • z-index: 1000으로 다른 요소 위에 표시.
  2. Body:
    • main에 margin-top: 60px을 적용하여 Header 공간 확보.
    • overflow-y: auto로 스크롤 가능 설정.

2. Left Sidebar 고정 및 Body 스크롤

구조 설명

  • Left Sidebar는 화면 왼쪽에 고정됩니다.
  • Body 콘텐츠는 Sidebar 오른쪽에서 스크롤됩니다.

HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fixed Left Sidebar Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="sidebar">고정된 Left Sidebar</div>
  <div class="content">
    <h1>Scrollable Content</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    <p>(이하 100개의 더미 텍스트를 삽입)</p>
  </div>
</body>
</html>

CSS 코드

/* style.css */
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: 100%;
  background-color: #333;
  color: white;
  padding: 20px;
  box-sizing: border-box;
}

.content {
  margin-left: 250px; /* Sidebar 폭 만큼 마진 추가 */
  padding: 20px;
  height: 100%;
  overflow-y: auto; /* 세로 스크롤 활성화 */
  font-family: Arial, sans-serif;
  font-size: 18px;
}

설명

  1. Sidebar:
    • position: fixed로 화면 왼쪽에 고정.
    • height: 100%로 전체 화면 높이를 차지.
  2. Content:
    • margin-left: 250px으로 Sidebar 옆에 위치.
    • overflow-y: auto로 스크롤 가능 설정.

3. Header와 Left Sidebar 고정, Body 스크롤

구조 설명

  • Header는 상단에 고정됩니다.
  • Left Sidebar는 왼쪽에 고정됩니다.
  • Body 콘텐츠는 나머지 영역에서 스크롤됩니다.

HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fixed Header and Sidebar Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>고정된 Header</header>
  <div class="wrapper">
    <div class="sidebar">고정된 Left Sidebar</div>
    <div class="content">
      <h1>Scrollable Content</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
      <p>(이하 100개의 더미 텍스트를 삽입)</p>
    </div>
  </div>
</body>
</html>

CSS 코드

/* style.css */
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #4CAF50;
  color: white;
  text-align: center;
  line-height: 60px;
  z-index: 1000;
}

.wrapper {
  display: flex;
  height: calc(100vh - 60px); /* Header 높이를 제외한 전체 높이 */
  margin-top: 60px; /* Header 공간 확보 */
}

.sidebar {
  position: fixed;
  top: 60px; /* Header 높이만큼 아래로 이동 */
  left: 0;
  width: 250px;
  height: calc(100vh - 60px); /* Header를 제외한 높이 */
  background-color: #333;
  color: white;
  padding: 20px;
  box-sizing: border-box;
}

.content {
  margin-left: 250px; /* Sidebar 폭 만큼 마진 추가 */
  padding: 20px;
  overflow-y: auto; /* 스크롤 가능 */
  width: calc(100% - 250px); /* Sidebar를 제외한 너비 */
  font-family: Arial, sans-serif;
  font-size: 18px;
}

설명

  1. Header와 Sidebar:
    • 각각 position: fixed로 고정.
    • Sidebar는 top: 60px으로 Header 아래 위치.
  2. Content:
    • margin-left: 250px과 width: calc(100% - 250px)으로 Sidebar를 제외한 영역 확보.
    • overflow-y: auto로 스크롤 가능.

4. 추가 확장

4.1 반응형 디자인

  • Media Query를 사용해 화면 크기에 따라 Header와 Sidebar의 크기를 조절합니다.
@media (max-width: 768px) {
  .sidebar {
    width: 200px;
  }
  .content {
    margin-left: 200px;
    width: calc(100% - 200px);
  }
}

@media (max-width: 480px) {
  .sidebar {
    display: none;
  }
  .content {
    margin-left: 0;
    width: 100%;
  }
}

4.2 사용자 경험 개선

  • Scroll Indicator를 추가하여 현재 스크롤 위치를 시각적으로 표시.
  • JavaScript로 Sidebar를 접었다 펼 수 있는 기능 추가.

이처럼 Header, Sidebar, Content의 고정 및 스크롤을 구현하면 UI의 구조와 동작을 효율적으로 설계할 수 있습니다. 이 코드를 기반으로 다양한 디자인 요구사항에 맞게 확장해보세요!

반응형
저작자표시

'개발 > HTML' 카테고리의 다른 글

1일차: HTML 기본 이해  (0) 2025.01.27
HTML의 Dialog 팝업 구현: 다양한 유형의 예제  (0) 2025.01.13
Canvas를 활용한 간단한 게임 개발  (0) 2025.01.11
HTML5 canvas 태그: 모든 것을 담을 수 있는 도화지  (0) 2025.01.11
HTML 태그의 다양한 종류와 활용법  (0) 2025.01.11

+ Recent posts

티스토리툴바