CSS로 반응형 레이아웃 스타일하기

시장에 출시되는 디바이스들의 화면들이 점점 다양해지면서 다양한 크기의 화면에 똑똑하게 반응하는 웹디자인이 중요해지고 있습니다. 이번 포스팅에서는 CSS의 미디어 쿼리(Media Query)와 float 속성을 이용해서 반응형 레이아웃을 잡는 방법에 대해서 알아보겠습니다.

웹페이지 마크업

CSS로 스타일할 예제 사이트의 전체 웹페이지를 HTML5에서 추가된 시멘택 태그를 활용해서 마크업하도록 하겠습니다. 먼저, 헤더 영역은 <header/> 태그로 감싸고, 사이트명에는 <h2/> 태그, 메뉴바에는 <nav> 태그를 적용합니다.

<header>
  <div class="wrapper">
    <h2>사이트명</h2>
    <nav>
      <ul>
        <li><a href="#">메뉴 1</a></li>
        <li><a href="#">메뉴 2</a></li>
        <li><a href="#">메뉴 3</a></li>
      </ul>
    </nav>
  </div>
</header>

메인 영역은 <main/> 태그로 감싸고, 핵심 컨텐츠에는 <article> 태그, 사이드바에는 <aside> 태그를 적용합니다.

<main>
  <div class="wrapper">
    <article>
      <h1>제목</h1>
      <p>가나다라바마사아자타카타파하</p>
      <p>가나다라바마사아자타카타파하</p>
      <p>가나다라바마사아자타카타파하</p>
      <p>가나다라바마사아자타카타파하</p>
      <p>가나다라바마사아자타카타파하</p>
    </article>
    <aside>
      <h3>사이드바</h3>
      <ul>
        <li>태그 1</li>
        <li>태그 2</li>
      </ul>
    </aside>
  </div>
</main>

마지막으로, 풋터 영역은 <footer/> 태그로 마크업을 해줍니다.

<footer>
  <div class="wrapper">
    <p>Copyright &copy 2011-2017 회사명</p>
  </div>
</footer>

3개의 영역에 공통적으로 wrapper 클래스가 적용된 래퍼 엘리먼트가 사용되고 있습니다. 이는 전체 레이아웃을 브라우저 화면 중앙에 위치시킨체로, 브라우저 화면 너비에 유동적으로 반응하게 하기 위함입니다.

.wrapper {
  max-width: 1024px;
  width: 90%;
  margin: 0 auto;
}

모바일 레이아웃

반응형 웹디자인의 기본은 모바일 기준으로 스타일링을 먼저 하고, 그 다음 테블릿, 그 다음 데스크탑 순으로 스타일을 확장해나가는 것입니다. 이렇게 작은 화면부터 공략하면 전반적으로 디자인이 쉬워질 분만 아니라, 상대적으로 컴퓨팅 리소스가 부족한 모바일에서 성능상 이점을 줄 수 있습니다.

먼저 헤더 영역에 대한 스타일링을 합니다. 여기서 눈여겨 볼 부분은 메뉴바 안에서 <a/> 태그의 display 속성을 block으로 지정했다는 점입니다. 이렇게 해주면 메뉴의 텍스트 뿐만 아니라 주변 박스 영역이 모두 클릭이 가능해지기 때문에 모바일에서 편리한 UI를 제공할 수 있습니다.

header {
  color: white;
  background: cadetblue;
  padding: 20px 0;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

nav a {
  display: block;
  text-align: center;
  margin: 5px 0;
  padding: 5px 0;
  text-decoration: none;
  font-weight: bold;
  line-height: 1.4;
  color: white;
  background: teal;
}

nav a:hover {
  text-decoration: underline;
}

메인 영역과 풋터 영역에 대한 스타일링은 반응형 레이아웃 관련해서는 그닥 언급할만 부분은 없는 것 같습니다.

main {
  padding: 20px 0;
}

article {
  padding-bottom: 10px;
}

article h1 {
  padding-bottom: 10px;
}

article p {
  line-height: 1.6;
}

aside {
  border-top: 15px solid teal;
  color: white;
  background: cadetblue;
  padding: 10px;
}

footer {
  color: white;
  background: teal;
  padding: 20px 0;
  font-weight: bold;
}

자, 이렇게 모바일 화면을 위한 Single Column(단일 열)으로 이뤄진 레이아웃을 먼저 완성해보았습니다.

테블릿 레이아웃

테블릿과 데스크탑에서 다른 스타일링을 적용하기 위해서 CSS의 미디어 쿼리(Media Query)를 이용해야 합니다. 미디어 쿼리를 사용하면 특정 조건이 만족했을 때만 어떤 스타일이 적용되게 할 수 있기 때문입니다.

먼저 테클릿 화면에서는 메뉴 버튼을 세로 방향이 아닌 가로 방향으로 나열해보겠습니다. 브라우저 화면의 너비가 480px 이상이 되면, 메뉴바 안에서 <a/> 태그의 float 속성을 left로 지정해줍니다.

@media only screen and (min-width: 480px) {
  nav a {
    float: left;
    width: 30%;
    margin-right: 5%;
  }

  nav li:last-child a {
    margin-right: 0;
  }
}

이렇게 해주면 메뉴 버튼들이 가로로 나열되는 대신에 헤더 영역을 벗어나는 현상이 나타날 것입니다. 이를 문제를 해결하기 위해서 헤더 영역 내의 래퍼에 clearfix 클래스를 추가합니다.

<header>
  <div class="wrapper clearfix">
    <!-- 생략 -->
  </div>
</header>

그리고 clearfix에 대한 스타일을 작성해주면 메뉴 버턴들이 헤더 영역 안으로 다시 들어올 것입니다.

.clearfix:after {
  clear: both;
  content: " ";
  display: table;
}

데스크탑 레이아웃

데스트탑 화면에서는 가로 방향으로 가용 영역이 넓기 때문에 메뉴 버튼 뿐만 아니라 좀 더 전반적으로 Multi Column(다중 열) 레이아웃을 적용할 수 있습니다. 예를 들어, 헤더 영역의 사이트 명과 메뉴바를 한 행에 표시할 수 있고, 핵심 컨텐츠 영역과 사이드바도 한 행에 표시할 수가 있습니다. 하나의 행 내에서 왼쪽에 배치할 엘리먼트에의 float 속성은 left로 지정하고, 우측에 배치할 엘리먼트의 float 속성은 right로 지정합니다. 필요하다면 각 열의 폭도 퍼센트로 설정해주는 스타일까지 묶어서 브라우저 화면의 너비가 768px 이상이 될 때만 활성화 시킵니다.

@media only screen and (min-width: 768px) {
  header h2 {
    float: left;
    font-size: 2rem;
  }

  nav {
    float: right;
    width: 60%;
  }

  main article {
    float: left;
    width: 70%;
  }

  main aside {
    float: right;
    width: 30%;
  }
}

마지막으로 메인 영역 내의 래퍼에도 clearfix 클래스를 추가하여, 위에서 겪었던 레이아웃이 깨지는 현상을 방지합니다.

<main>
  <div class="wrapper clearfix">
    <!-- 생략 -->
  </div>
</main>

자, 이렇게 테블릿과 데스크탑 화면을 위한 레이아웃도 완성되었습니다. 브라우저의 너비를 넓혀보면 그에 따라 적합한 레이아웃이 적용되는 것을 확인하실 수 있으실 겁니다.

마치면서

이상으로 간단한 예제 웹페이지를 마크업과 스타일하면서 반응형 레이아웃을 어떻게 잡아가면 되는지 살펴보았습니다. 최근에는 반응형 레이아웃을 위해 float 속성보다는 CSS3에 추가된 Flexbox가 점점 더 많이 사용되는 추세입니다. 하지만 기존에 개발된 웹사이트를 유지보수하다보면 float로 구현된 레이아웃을 심심치 않게 접하게 되기 때문에 한 번 다뤄보았습니다. Flexbox로 반응형 레이아웃을 잡는 방밥에 대해서는 추후 기회가 되면 따로 포스팅해보도록 하겠습니다.