CSS

float

Float는 편집 디자인에서 이미지를 삽화로 삽입할 때 사용하는 기법입니다. 또한 레이아웃을 잡을 때도 사용하는 기능이기 때문에 꽤 중요합니다. 

float 기본

예제 - float.html

<!doctype html>
<html>
<head>
  <style>
    img{
      width:300px;
      float:left;
      margin:20px;
    }
    p{
      border:1px solid gray;
    }
  </style>
</head>
<body>
  <img src="sample.mt.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
  </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 expedita 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>

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>

댓글

댓글 본문
작성자
비밀번호
  1. 푸른하늘
    11일차 공부 감사합니다
  2. 도레미
    11/26 오늘도 감사히 잘 보고 갑니다!
  3. 오빠는다르다
    감사합니다~!!!!
  4. 아래처럼 container에 box-sizing : 보더 박스를 안주면 container 테두리 굵기 수정을 더 쉽게 할수있는듯합니다
    <!doctype html>
    <html>
    <head>

    <style>
    *:not(.container){
    box-sizing: border-box;
    }
    .container{
    border : 3px solid black;
    width: 500px;
    margin: auto;
    }
    header{
    border-bottom : 1px solid black;
    }
    nav{
    float : left;
    border-right: 5px solid black;
    width: 100px;
    }
    article{
    float: left;
    border-right : 1px solid black;
    border-left : 5px solid tomato;
    margin-left: -5px;
    width: 305px;
    }
    aside{
    float: left;
    border-left: 1px solid tomato;
    margin-left: -1px;
    width: 101px;
    }
    footer{
    clear:both;
    border-top: 1px solid black;
    }
    </style>


    </head>
    <body>
    <div class="container">
    <header>header</header>
    <main>
    <nav>nav</nav>
    <article>articlearticlearticle articlearticlearticle articlearticlearticle articlearticlearticle</article>
    <aside>aside</aside>
    </main>
    <footer>footer</footer>
    </div>

    </body>
    </html>
  5. senime
    float 두번째 수업 마지막에 box-sizing:border-box 로 하고 container width 를 540px 로 했는데도 aside(=ad)부분이 오른쪽으로 옮겨지지가 않네요. 크롬 검사 부분에서도 nav,article,aside 부분을 합하면 540px로 나오는데 aside부분이 밑부분에 나오게 되네요. container width 를 541px로 하면 aside 부분이 오른쪽으로 옮겨지기는 하는데 어떤 문제인지요..ㅠㅠ
  6. protester
    플렉스 빨리 베워야 겠어요~! ㅠ.ㅠ
  7. 오들오들오드리
    이미지가 없을 경우. 어느 경로에 넣어줘야 할까요?
  8. nevertoolate
    레이아웃 잡을 때는 flex로 하는 것이 훨씬 유요한 거죠??
  9. 세븐나이츠
    강의 잘 봤습니다
  10. 14번째
    5.24.
  11. 공삼이육
    감사합니다
    float, box-sizing, flex 수강하기
  12. php가 첫취업?
    은근히 계산하는게...어려워보이네요
  13. mj chang
    flex때 정신없었는데 float를 공부하니 좀 이해가 됩니다,
  14. Hyeongmin Lee
    잘 보고 있습니다!!
    그런데 footer에 copyright라고 말씀하시면서 copyleft라고 써놓으신 이유가 있으신가요?ㅎㅎ
  15. jgatsby
    ...와 엄청난 노가다...
  16. ckocko
    아 정말 감사합니다! 이해가 쏙쏙 잘됐어요 ㅠㅠㅠㅠㅠㅠㅠㅠㅠ 제가 생각이 짧았네요 덕분에 배워갑니다 좋은 하루 보내세요!
    대화보기
    • wodud2920@naver.com
      물론 처음에 지정된 크기가 계속 일정하게 지속된다면 ckocko님 말씀대로 긴 컨텐츠만 지정해주면 됩니다. 하지만 짧았던 컨텐츠가 언제든지 긴 컨텐츠보다 길어질 가능성을 염두해두고 번거롭게 수정하지않아도 되도록 두 컨텐츠 모두 보더를 지정하는게 일반적입니다. 답변이 되었으면 합니다:)
      대화보기
      • ckocko
        댓글 감사합니다! 비가 늘어 나는 양에 따라서 보더가 길어져야 하는거니까 짧은 에이는 안주고 비에만 보더를 주면 끊김도 없고 컨텐츠가 많아져도 저절로 늘어나지 않나요??ㅠㅠㅜㅜ 둘 사이에 선이 필요한거 컨텐츠 크기가 큰 애만 주면 되지 않을까 싶어서요
        대화보기
        • 영상에서 보시다시피 어느 한쪽 엘리먼트에만 보더를 주면 그 엘리먼트에 있는 컨텐츠 크기만큼만 선이 생깁니다.
          같이 붙어있는 두 엘리먼트 (A, B)에서 A의 컨텐츠 길이가 5고 B의 컨텐츠 길이가 10이라고 가정해보겠습니다. A에게만 보더를 줬더니 선 길이가 5여서 나머지 5부분은 선이 뚝 끝긴채 화면상에서 보입니다. 이를 막기 위해서 두 엘리먼트에 보더를 줘서 끊김현상을 막는 것입니다.
          대화보기
          • ckocko
            네비랑 어사이드에 보더를 주는 이유가 따로 있는건가요?? 아티클에서 레프트 롸이트만 주면 되는거 아닌가 해서요..!
          • 플럭스가 정말 대단한거였군요,,,하하 ㅋㅋ
          • D.JA
            flex 부터 멘...붕오기 시작. 여기서 다시 한번..
          • sssssqew
            float 을 사용하는 holy grail layout 은 정말 어렵네요 ㅠ
          • feel5
            ㅎㅎ.. 그냥 flex로 할래요..ㅋㅋㅋ
          • 보긔
            수강하였습니다. 복습하러 고고~!
          • wlsl
            2016.09.10. 완료!
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기