HTML과 CSS를 사용하여 고정 사이드바 레이아웃을 구현하는 방법

HTML과 CSS를 사용하여 고정 사이드바 레이아웃을 구현하는 방법

웹 디자인에서 고정 사이드바 레이아웃은 일반적이고 실용적인 레이아웃 방법입니다. 고정 사이드바 레이아웃을 사용하면 탐색 메뉴, 검색 창 또는 기타 중요한 콘텐츠를 웹페이지 한쪽에 고정하여 페이지가 스크롤될 때 계속 표시되도록 할 수 있습니다. 이번 글에서는 HTML과 CSS를 활용하여 간단하고 실용적인 고정 사이드바 레이아웃을 구현하는 방법을 소개하고 구체적인 코드 예시를 제공하겠습니다.

먼저 기본 HTML 구조를 만들어야 합니다. HTML 문서의 태그에서 아래와 같이 기본 컨테이너 <div>를 사용하여 전체 페이지 콘텐츠를 래핑할 수 있습니다. <code>标签中，我们可以使用一个主容器 <div> 来包裹整个页面内容，具体如下所示：<pre class='brush:html;toolbar:false;'>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;固定侧边栏布局&lt;/title&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&quot;container&quot;&gt; &lt;div class=&quot;sidebar&quot;&gt; &lt;!-- 侧边栏内容 --&gt; &lt;/div&gt; &lt;div class=&quot;content&quot;&gt; &lt;!-- 页面内容 --&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre><p>在上述代码中，我们创建了一个名为 <code>container 的主容器，其中包含一个名为 sidebar 的侧边栏容器和一个名为 content 的页面内容容器。

接下来，我们需要使用CSS样式来实现固定侧边栏的效果。在这里，我们将使用 position: fixed; 属性来固定侧边栏在页面中。具体的CSS样式如下所示：

.container {
    display: flex;
}

.sidebar {
    width: 200px;
    height: 100vh;
    background-color: #f1f1f1;
    position: fixed;
    left: 0;
    top: 0;
    overflow-y: auto;
}

.content {
    margin-left: 200px;
    width: calc(100% - 200px);
    padding: 20px;
}

在上述代码中，我们将 container 容器设置为 display: flex;，这样可以使侧边栏和页面内容容器水平排列。然后，我们对 sidebar 容器进行样式设置，其中 width 属性定义了侧边栏的宽度，height: 100vh; 表示侧边栏的高度和浏览器窗口的高度相等，background-color 属性定义了侧边栏的背景颜色，position: fixed; 将侧边栏固定在网页中，left: 0; 和 top: 0; 分别将侧边栏的位置设置在页面的左上角，overflow-y: auto; 表示当内容超出侧边栏高度时，可滚动显示。

为了使页面内容不被侧边栏遮挡，我们需要对 content 容器进行样式设置，其中 margin-left: 200px; 表示页面内容容器距离左侧边栏的宽度，width: calc(100% - 200px); 表示页面内容容器的宽度等于浏览器宽度减去侧边栏的宽度，padding: 20px;rrreee

위 코드에서는 sidebar라는 사이드바 컨테이너와 content 페이지 콘텐츠 컨테이너라는 컨테이너를 포함하는 container라는 기본 컨테이너를 만듭니다. .

다음으로 고정 사이드바 효과를 얻으려면 CSS 스타일을 사용해야 합니다. 여기서는 페이지의 사이드바를 고정하기 위해 position:fixed; 속성을 ​​사용하겠습니다. 구체적인 CSS 스타일은 다음과 같습니다.

rrreee

위 코드에서는 컨테이너 컨테이너를 display: flex;로 설정하여 사이드바와 페이지 콘텐츠 컨테이너를 만들 수 있습니다. 가로로 배열되어 있습니다. 그런 다음 sidebar 컨테이너의 스타일을 지정합니다. 여기서 width 속성은 사이드바의 너비를 정의하고 height: 100vh;는 사이드바를 나타냅니다. height는 브라우저 창의 높이와 같습니다. background-color 속성은 사이드바의 배경색을 정의합니다. position:fixed;는 웹페이지의 사이드바를 고정합니다. left: 0; 및 top: 0;은 각각 사이드바의 위치를 ​​페이지의 왼쪽 상단으로 설정합니다. overflow-y: auto; code> 콘텐츠가 사이드바 높이를 초과하면 스크롤할 수 있음을 나타냅니다. 🎜🎜페이지 콘텐츠가 사이드바에 의해 차단되는 것을 방지하려면 <code>콘텐츠 컨테이너의 스타일을 설정해야 합니다. 여기서 margin-left: 200px;는 다음을 의미합니다. 페이지 콘텐츠 컨테이너는 왼쪽부터 위치합니다. 사이드바의 너비, width: calc(100% - 200px);는 페이지 콘텐츠 컨테이너의 너비가 브라우저의 너비에서 뺀 너비와 같다는 것을 의미합니다. 사이드바의 너비, padding: 20px; 페이지 콘텐츠 컨테이너의 패딩을 나타냅니다. 🎜🎜위의 HTML 구조와 CSS 스타일 설정을 통해 간단한 고정 사이드바 레이아웃을 성공적으로 구현했습니다. 디자인 및 레이아웃 요구 사항을 충족하기 위해 실제 요구 사항에 따라 사이드바 및 페이지 콘텐츠의 스타일을 사용자 정의할 수 있습니다. 🎜🎜이것은 고정된 사이드바 레이아웃의 예일 뿐이며 특정 요구 사항에 따라 추가로 사용자 정의하고 확장할 수 있습니다. 이 글이 고정 사이드바 레이아웃을 이해하고 구현하는 데 도움이 되기를 바랍니다. 🎜