0517 / layout.html & css (header 영역 추가)

- layout.html

<div id="header" class="clearfix">

      <h1 class="logo">

        <a href="./all_contents.html" target="_blank">웹 기초</a>

      </h1>

      <div class="navigation">

        <ul>

          <li><a href="#">li_02</a></li>

          <li><a href="#">li_01</a></li>

          <li><a href="#">li_03</a></li>

          <li><a href="#">li_04</a></li>

          <li><a href="#">li_05</a></li>

          <li><a href="#">li_06</a></li>

        </ul>

      </div>

    </div>

----------------------------------------------------

- layout.css

#header  { width:100%; height:auto; background-color: #f06; }

 

  .logo { float:left; width:120px; height:100px; background-color: #ccc; }

  .logo > a { display:block; width:100%; height:100%; background-color: #add; }

 

  .navigation { float:right; width:400px; height:100px; background-color: #fc0; }

 

    .navigation ul { width:100%; height:100%; background-color:transparent; }

    .navigation li { float:left; width:16.666666%; height:100%; padding:10px; box-sizing:border-box;

                        background-image:linear-gradient(45deg, #cca, #adf); }

 

    .navigation li > a { display:block; width:100%; height:100%; background-color: rgba(100,100,100, 0.3);

      /* background-color: #fff;  opacity:0.5; */ }

----------------------------------------------------

- 결과