K-Digital Credit

[15강] CSS | 웹 페이지 레이아웃

웹 페이지를 제작할 때는 먼저 구획을 나누어 몇 개의 큰 박스를 화면에 배치한 다음 각 박스 안에서 세부적인 내부 요소들의 배치가 이루어집니다. 이와 같이 웹 페이지의 전체적인 윤곽을 잡는 작업을 웹 페이지 레이아웃이라고 합니다.

다음은 HTML5 레이아웃 태그를 이용한 웹 페이지 레이아웃의 한 예입니다.

HTML5 웹 페이지 레이아웃

ex5-14.html

<style>
.box { width: 800px;  margin: 0 auto; }
header { height: 60px; background-color: yellow; }
aside { width: 200px;  height: 300px;  float: left; background-color: pink; }
section { width: 600px;  height: 300px; float: right; background-color: orange; }
footer { clear: both;  height: 60px;  background-color: yellow; }
</style>
<body>
<div class="box">
<h2>HTML5의 레이아웃 태그</h2>
<header>
상단 헤더(<header> 태그)
</header>
<aside>
사이드바<br>(<aside> 태그)
</aside>
<section>
메인 콘텐트(<section> 태그)
</section>
<footer>
하단 푸터(<footer> 태그)
</footer>
</div> 
</body>

ex5-14.html의 실행 결과

다음은 HTML5 레이아웃 태그를 이용한 웹 사이트 메인 페이지 예시입니다.

메인 페이지 레이아웃 예시

ex5-16.html

<style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
    }

    header {
      background-color: #333;
      color: white;
      padding: 20px;
    }

    .logo {
      float: left;
      font-size: 24px;
      font-weight: bold;
    }

    .site_desc {
      float: right;
      font-size: 14px;
      margin-top: 8px;
    }

    header::after {
      content: "";
      display: block;
      clear: both;
    }

    nav {
      background-color: #444;
      color: white;
      padding: 10px;
      text-align: center;
    }

    nav a {
      color: white;
      margin: 0 10px;
      text-decoration: none;
    }

    main {
      min-height: 400px;
    }

    aside {
      float: left;
      width: 25%;
      background-color: #f2f2f2;
      padding: 20px;
    }

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

    aside li {
      margin-bottom: 10px;
    }

    section {
      float: left;
      width: 75%;
      padding: 20px;
    }

    .extra_content {
      margin-top: 20px;
      background-color: #eef;
      padding: 15px;
    }

    footer {
      background-color: #ddd;
      padding: 50px;
      height: 120px;
    }

    .footer_left {
      float: left;
      width: 50%;
      text-align: left;
    }

    .footer_right {
      float: right;
      width: 50%;
      text-align: right;
    }
</style>
<body>
  <header>
    <div class="logo">로고</div>
    <div class="site_desc">HTML5 웹사이트</div>
  </header>

  <nav>
    <a href="#">홈</a>
    <a href="#">서비스</a>
    <a href="#">블로그</a>
    <a href="#">연락처</a>
  </nav>

  <main>
    <aside>
      <h3>메뉴</h3>
      <ul>
        <li><a href="#">공지사항</a></li>
        <li><a href="#">갤러리</a></li>
        <li><a href="#">자료실</a></li>
        <li><a href="#">문의하기</a></li>
      </ul>
    </aside>

    <section>
      <h2>본문 영역</h2>
      <p>이곳은 주요 콘텐츠를 보여주는 공간입니다. 다양한 정보를 여기에 배치할 수 있습니다.</p>

      <div class="extra_content">
        <h3>추가 콘텐츠</h3>
        <p>이 섹션은 본문 하단에 있는 보조 정보 영역입니다.</p>
      </div>
    </section>
  </main>

  <footer>
    <div class="footer_left">
      © 2025 나의 홈페이지
    </div>
    <div class="footer_right">
      이메일: contact@myweb.com
    </div>
  </footer>
</body>

ex5-16.html의 실행 결과