Logo

CSS로 반응형 사이드바 스타일하기

웹사이트 레이아웃에서 사이드바(sidebar)는 목차, 광고 배너, 인기/신규 게시물 목록, 연관/추천 상품 목록과 같이 보조적인 컨텐츠를 배치하기 위해서 사용합니다. 이번 포스팅에서는 플렉스 박스(Flexbox)와 미디어 쿼리(Media Query)를 이용해서 화면의 너비에 알아서 반응하는 사이드바를 만들어보겠습니다.

웹페이지 마크업

예제로 목차 영역과 기사 영역으로 이루어진 간단한 웹페이지의 구조를 HTML로 작성해보겠습니다. <main> 엘리먼트 아래에 목차 영역을 <aside> 엘리먼트로 기사 영역을 <article> 엘리먼트로 마크업합니다. 시멘틱(sematic) HTML에서 사이드바는 이처럼 <aside> 엘리먼트를 이용하는 경우가 많습니다.

접근성 측면에서 기사 영역보다 목차 영역에 대한 HTML 코드를 먼저 작성하는 것이 유리합니다. 키보드 사용자가 탭으로 웹사이트를 탐색할 때 목차에 우선적으로 포커스가 이동하기 때문입니다. 목차 영역을 화면의 좌측에 놓을지 우측에 놓을지는 CSS로 제어할 부분입니다.

<main>
  <aside>
    <nav>
      <h2>목차</h2>
      <ul>
        <li>
          <a href="#intro">머리말</a>
        </li>
        <li>
          <a href="#html">HTML</a>
        </li>
        <li>
          <a href="#css">CSS</a>
        </li>
        <li>
          <a href="#http">HTTP</a>
        </li>
        <li>
          <a href="#outro">맺음말</a>
        </li>
      </ul>
    </nav>
  </aside>

  <article>
    <h1>Web 기술</h1>
    <section>
      <h2>머리말</h2>
      <p>
        웹(World Wide Web)의 개방성은 웹사이트나 온라인 애플리케이션을
        제작하려는 사람들에게 많은 기회를 제공합니다. 하지만 그 사용 방법을
        알아야 웹 기술을 잘 활용할 수 있습니다. 아래의 링크들을 확인하여 다양한
        웹 기술을 배워보세요.
      </p>
    </section>
    <section>
      <h2>HTML</h2>
      <p>
        <a href="https://developer.mozilla.org/ko/docs/Web/HTML">HTML</a
        >(HyperText Markup Language)은 웹페이지에 내용을 기술하고 정의하는 데
        사용합니다.
      </p>
    </section>
    <section>
      <h2>CSS</h2>
      <p>
        <a href="https://developer.mozilla.org/ko/docs/Web/CSS">CSS</a
        >(Cascading Style Sheets)는 웹페이지 콘텐츠의 모양이나 표현을 기술하는
        데 사용합니다.
      </p>
    </section>
  </article>
</main>

공통 스타일링

우선 데스크탑이든 모바일이든 공통적으로 적용되어야하는 기본적인 스타일을 CSS 코드를 작성해보겠습니다.

body {
  background: navy;
  line-height: 1.6;
}

main {
  align-items: baseline;
}

article {
  background: white;
  padding: 32px;
}

aside {
  background: white;
  padding: 24px;
}

aside h2 {
  font-size: 1.2rem;
  color: dimgray;
}

ul {
  list-style: none;
  padding: 0;
}

a {
  text-decoration: none;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

데스크탑 스타일링

플렉스 박스(Flexbox)를 이용하여 우선 데스크탑 환경에 적합한 레이아웃을 잡아보겠습니다.

목차 영역과 기사 영역을 좌우로 나란히 배치하기 위해서 <main> 엘리먼트에 display: flex를 적용하여 플렉스 컨테이너로 만들어줍니다. 그 다음, 목차 영역과 기사 영역의 너비를 3:1 비율로 유지하기 위해서 <article> 엘리먼트에는 flex: 3, <aside> 엘리먼트에는 flex: 1을 적용해줍니다. 참고로 목차 영역을 화면 우측에 배치하고 싶다면 추가로 flex-direction: row-reverse<main> 엘리먼트에 적용해주면 됩니다.

main {
  display: flex;
  align-items: baseline;
  gap: 32px;
  padding: 48px 0;
}

article {
  flex: 3;
  background: white;
  padding: 32px;
  border-radius: 16px 0 0 16px;
}

aside {
  flex: 1;
  background: white;
  padding: 24px;
  border-radius: 0 16px 16px 0;
}

모바일 스타일링

미디어 쿼리를 이용하여 모바일 환경에 최적화된 스타일을 적용해보도록 하겠습니다.

목차는 웹사이이트를 이용하는데 보조적인 역할을 하기 때문에 제한된 모바일 화면 크기를 고려하여 나타나지 않도록 하였습니다. 마지막으로 기사 영역의 4개의 모서리가 모두 둥글게 해주고, 메인 영역의 상하 뿐만 아니라 좌우에도 약간의 패딩을 넣어주는 것이 좋겠습니다.

@media (max-width: 40rem) {
  aside {
    display: none;
  }

  article {
    border-radius: 16px;
  }

  main {
    padding: 24px;
  }
}

코드팬에 들어가셔서 브라우저 너비를 줄였다가 넓혀보시면 그에 따라 레이아웃이 바뀌는 것을 확인하실 수 있으실 겁니다.

마치면서

이상으로 플렉스 박스와 미디어 쿼리를 활용하여 모바일에서 반응형 사이드바를 어떻게 구현할 수 있는지 알아보았습니다.