레이아웃 : float (생활코딩)

float 이미지를 삽입할 때, 자연스럽게 나타나는 ? 그런 기법.

레이아웃에서도 꽤 사용됨.

여러 단락일 경우,

<body>

<p style="clear:both"> 이미지에 따라서 정렬 처리.

float을 활용한 holy grail layout

예제 - float_2_holy_grail_layout.html

<!doctype html>
<html>
<head>
  <style>
    *{
      box-sizing:border-box;
    }
    .container{
      width:540px;
      border:1px solid gray;
      margin:auto;
    }
    header{
      border-bottom: 1px solid gray;
    }
    nav{
      float:left;
      width:120px;
      border-right:1px solid gray;
    }
    article{
      float:left;
      width:300px;
      border-left:1px solid gray;
      border-right:1px solid gray;
      margin-left:-1px;
    }
    aside{
      float:left;
      width:120px;
      border-left:1px solid gray;
      margin-left:-1px;
    }
    footer{
      clear:both;
      border-top:1px solid gray;
      text-align: center;
      padding:20px;
    }
  </style>
</head>
<body>
 <div class="container">
    <header>
    <h1>
      CSS
    </h1>
    </header>
    <nav>
      <ul>
        <li>position</li>
        <li>float</li>
        <li>flex</li>
      </ul>  
    </nav>
    <article>
      <h2>float</h2>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit quae earum enim ab distinctio corrupti eius reprehenderit non, rerum ut nisi autem cum sint perferendis eum id velit, molestias nesciunt. Ullam dignissimos consequuntur explicabo id voluptas vel deleniti nesciunt veritatis iusto commodi, laudantium cumque vero deserunt laboriosam. Ea, quia est?
    </article>
    <aside>
      ad  
    </aside>
    <footer>
      copyleft  
    </footer>
 </div>
   
</body>
</html>

결과값.

'코딩' 카테고리의 다른 글

그래픽 : 배경(background) (0)	2017.02.22
레이아웃 : 다단(multi column) (0)	2017.02.22
레이아웃 : media query (0)	2017.02.22
레이아웃 : flex (0)	2017.02.22
레이아웃 : 포지션 (0)	2017.02.19