Notice
Recent Posts
Recent Comments
Link
«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

Amarans

0219 Flot | holy_grail_layout 본문

CSS

0219 Flot | holy_grail_layout

Amarans 2020. 2. 19. 13:32 
<!doctype html>
<html>
<head>
  <style>
    img{
      width:300px;
      float:left;
      margin:20px;
    }
    p{
      border:1px solid gray;
    }
  </style>
</head>
<body>
  <img src="sample.jpg" alt="">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus,
     obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam 
     expedita Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus,
      obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam exped
      ita Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati
      quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam expedita
  </p>
  <p style="clear:both;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus,
     obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam 
     expedita Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus,
      obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam exped
      ita Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati
      quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam expedita
  </p>
</body>
</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>

'CSS' 카테고리의 다른 글

0220 CSS-|Filter|Transtion|  (0) 2020.02.20
0219 | Column | Background |  (0) 2020.02.19
0219 Flex | grow&shrink | holy_grail_layout  (0) 2020.02.19
0218 CSS| Position | text_align |  (0) 2020.02.19
0218 CSS - | Box | Color | Font |  (0) 2020.02.19
'CSS' Related Articles more
Comments