태블릿 UI 만드는 스타일 팁, 동적으로 너비가 변하는 레이아웃 margin-right padding-right

이러한 모습을 만들어 줄 때 콘텐츠 영역에 대한 스타일 지정방법이다.

동적으로 너비가 변하는 레이아웃인데요. 다음 화면을 봐주세요.

1. HTML

  <div id="wrap">
    <nav id="main_lnb"> 왼쪽 서브 메뉴</nav>
    <div id="content_wrap">오른쪽 본문 바디
      <div id="content">

      </div>
    </div>

  <div id="wrap">
    <nav id="main_lnb">
      <ul>
        <li><a href="#">ButoO</a></li>
        <li><a href="#">ButoO</a></li>
        <li><a href="#">ButoO</a></li>
        <li><a href="#">ButoO</a></li>
        <li><a href="#">ButoO</a></li>
      </ul>
    </nav>
    <div id="content_wrap">
      <div id="content">
        <article>
          <h1>Lorem ipsum dolor sit.</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum pariatur veritatis   facilis laborum ad.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente eos officiis eaque sit placeat quam aperiam molestiae magnam eum, ipsum sunt cupiditate repellat pariatur veniam eligendi nulla ullam, asperio  res voluptates, possimus a mollitia, accusantium alias! Nostrum enim sed at culpa animi, earum itaque delectus. Dicta minus, quo numquam, soluta harum impedit. Possimus vitae aliquam sed   non atque molestiae ipsam! Accusamus fugit aperiam, beatae facere voluptatum voluptatem animi nesciunt dolores quos cupiditate dicta optio excepturi quam fuga reiciendis quo, in dolore illo adipisci odio assumenda nobis quidem. Expedita a soluta laboriosam dolorum eligendi itaque nisi nesciunt dolorem debitis! Harum, veniam, maiores.</p>
        </article>
        <article>
          <h1>Lorem ipsum dolor  .</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, sapiente, voluptatibus! Asperiores, obcaecati, cum!</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis nihil debitis, rem maxime molestiae fuga incidunt. Voluptatem amet sit placeat adipisci, ratione aliquam explicabo minus eos suscipit, quo ullam similique fuga commodi, provident aperiam debitis est. Rerum ut sunt fuga porro magnam ullam et ad deleniti voluptates repellendus id dolor cum eveniet, modi, at nobis omnis harum fugiat inventore magni? Dolore sunt similique tenetur maxime et ullam modi quae officiis vero aliquam voluptatibus hic veritatis, laborum quisquam amet minus error! Impedit maxime iste necessitatibus quasi consequatur, eaque placeat dolorum, officiis vitae rerum expedita! Ab quae quia sunt doloribus qui sed.</p>
        </article>
        <article>
          <h1>Lorem ipsum dolor.</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate delectus illum laudantium possimus magni!</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla quasi tempora iste, suscipit consequuntur magnam ipsum quod ut aliquam voluptate. Incidunt quibusdam nihil cupiditate hic eius nulla aperiam asperiores, pariatur iusto. Expedita saepe a perspiciatis veritatis praesentium, unde fugit nesciunt deserunt illo, earum velit soluta accusantium. Quis dolorum sit esse quod consectetur sequi sint labore, inventore iusto itaque dolore eius nobis, repudiandae alias laboriosam, eaque cumque blanditiis aspernatur. Earum temporibus illo, quod vel est incidunt, suscipit officia dolor necessitatibus, perspiciatis accusantium ipsum nemo magni! Nulla laudantium molestias sequi nihil magni corporis similique voluptatum voluptate, porro maiores tempora dolore labore officia.</p>
        </article>
      </div>
    </div>
  </div>

 

2. CSS

*{

화면 윤곽을 보기 위해 테두리를 집어 넣은 경우가 있으므로, UI가 밀리지 않도록 box-sizing을 border-box로 지정한다. */

margin:0;

padding:0;

box-sizing: border-box;

}

#wrap{
  overflow: hidden;
}
#wrap > #main_lnb{
  float: left;
  width: 200px;
}
#wrap > #content_wrap{

  /* 콘텐츠 부분을 화면 100% 또는 99.9%로 차지하게 두고,

콘텐츠를 오른쪽으로 잡아 당긴다

#main_lnb의 width 만큼

*/
  float: left;
  width: 100%;
  *width:99.9%;
  margin-right: -200px;
}
#wrap > #content_wrap > #content{

/* #content_wrap에서 오른쪽 잡아당긴 부분을

padding-right 부분을 값을 줘서 왼쪽으로 밀어 줍니다.

*/
  padding-right: 200px;
  border: 1px solid green;
}

#wrap{
  overflow: hidden;
}
#wrap > #main_lnb{
  float: left;
  width: 200px;
}
#wrap > #content_wrap{
  float: left;
  width: 100%;
  *width:99.9%;
  margin-right: -200px;
}
#wrap > #content_wrap > #content{
  padding-right: 200px;
  border: 1px solid green;
}

위와 같이 하면

본문영역 100%에서 왼쪽 서브 메뉴 폭 만큼만 빠지는 유동적인 UI를 만들 수 있다.

 

참고자료 : 모던 웹디자인을 위한 HTML5 + css, p.355