반응형 웹 디자인은 사용자 기기의 화면 크기에 맞춰 자연스럽게 변화하는 디자인을 말합니다. 주로 CSS 미디어쿼리를 사용하여 구현됩니다. 이제 CSS로 간단한 반응형 디자인을 구현하는 방법에 대해 알아보겠습니다.

기본 레이아웃 설정

먼저, 기본적인 레이아웃을 설정합니다. HTML에서 각 섹션을 나타내는 요소들에 클래스를 할당하고, CSS를 사용하여 간단한 레이아웃을 정의합니다.

<div class="container">
  <div class="header">헤더</div>
  <div class="content">컨텐츠</div>
  <div class="sidebar">사이드바</div>
  <div class="footer">푸터</div>
</div>

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.header, .content, .sidebar, .footer {
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .header, .footer {
    background-color: #f2f2f2;
  }
}

미디어쿼리로 반응형 디자인 추가

이제 미디어쿼리를 사용하여 브라우저의 너비에 따라 레이아웃을 조절합니다. 예를 들어, 브라우저가 768px보다 큰 경우 헤더와 푸터에 배경색을 추가하는 등의 스타일을 변경할 수 있습니다.

@media (min-width: 768px) {
  .sidebar {
    float: left;
    width: 25%;
  }

  .content {
    float: right;
    width: 70%;
  }
}

결론

위의 예시는 CSS를 사용하여 간단한 반응형 레이아웃을 구현하는 방법을 보여줍니다. 미디어쿼리를 사용하여 사용자의 화면 크기에 맞게 스타일을 조절함으로써, 웹사이트는 사용자의 환경에 맞춰 최적화된 사용자 경험을 제공할 수 있게 됩니다.

참고 자료: MDN Web Docs - Media Queries