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. 곤비
    0219
  2. 새콤달콤
    완료
  3. DreamBoy
    2023.09.21. CSS - 레이아웃 - float 파트를 시작합니다.
  4. AgainstartJH
    2022년 11월 21일 월요일 학습완료!
  5. gn0es
    22.09.15
  6. 헤밍웨이
    220823 감사합니다
  7. 09년생개발자
    쉬워요
  8. INJE
    22/03/17
  9. 문어
    저는 margin 값 -1 이 아닌
    margin-left: -0.5px;
    margin-right: -0.8px; 으로 지정하니깐 선이 딱 맞았습니다.

    하지만 *{box-sizing: border-box;} 주는 순간 또 다시 선이 맞지 않고 aside가 아래로 내려갑니다.
    이때는 강사님과 동일하게 -1 값을 주면 동일해집니다.
  10. 드림보이
    2021.11.16. float 파트 수강완료
  11. vogueupp
    완료
  12. choi
    완료
  13. jeisyoon
    2021.06.22 Float - OK
  14. box-sizing을 해도 안올라와서 왜그런지 요소검사로 확인했더니 aside에는 제가 보더를 주지않아서... -1픽셀이 적용되지 않았네요 ㅎㅎ 아래 안되신분도 그게 아닐까 싶은..
  15. 강정진
    float 기능을 배운 이후부터 전자책에 삽화를 넣기 시작했습니다 감사합니다 ㅎㅎ
  16. 스마일가이
    2021.01.27 완료 감사합니다
  17. 따뜻한츄르
    210101
  18. 201218
  19. 만듀
    20201117
  20. 만듀
    20201116
  21. 감사합니다
  22. jaehyunlee
    완료
  23. 박병진
    감사합니다
  24. 콜라
    20200930 완료
  25. 김성곤
    20200724 감사합니다!
  26. 한강
    float 잘 배웠습니다. 역시 어렵네요. ㅎ
    200610
  27. BrosBus
    공부하는데 정말 도움이 많이 되서 수업 잘 보구 있습니다.
    float 에서 한가지 궁금해서 여쭤봅니다.
    지금 수업의 경우 article 이 가장 길 경우인데 만약 nav 가 가장 길때는 article 과 aside 사이의 선이 아래까지 닿지 않고 끊어집니다.
    이럴경우 어떻게 해야 끊어지지 않는지 부탁드립니다.
  28. 푸딩
    너무 어렵다....플로트................에체템알이랑 씌에스에스는 그나마 기본이라고 생각했는데...플로트 오버플로우 히든;;홈페이지 영상 보면서 이런거 나오니까 멘붕에 빠짐..ㅜㅜㅜㅜㅜㅜㅜ그래도 생활 코딩 강좌가 있어서 다행이다........흑................
  29. green diseny
    어렵긴하지만 너무재미있음!!!~~~ㅎㅎㅎ
  30. 무지개반사
    완료
  31. Blanc
    2020.01.05
  32. jinxiong
    clear~
  33. 힙합엄지
    article랑aside사이에 border 넣었을 때 겹치는 부분이 생겨서 두껍게 표시돼요ㅠㅠㅠ nav랑article겹칠때 article에서 margin-left:-1px;로 오버랩시켜서 없앴는데 aside랑 article이랑 또 겹쳐서 같은 방법으로 없애려니 그게 안되네요... 방법이 없을까요?
  34. 다나가
    190806 - 수강완료!!!!!
  35. FIRE
    20190730 완료
  36. lygon
    2019-03-05 완료
  37. 숨이
    완료햇습니당
  38. 쿵콰이
    12분 까지보다가
    걍 flex 하는게 나을꺼같아서 다음강좌로 넘어갈게요 ㅠㅠ
  39. 김민영
    완료
  40. 후훗
    일부러 그렇게 하신듯... 카피레프트라는 개념도 있어요..
    대화보기
    • guests
      카피라이트 <-카피레프트
    • 스페이스몽키
      감사합니다! 드디어 막혔던게 풀렸어요!
    • 멜번리디아
      쉽지않은 float를 쉽게 가르쳐주셔서 감사합니다.
    • 푸른하늘
      11일차 공부 감사합니다
    • 도레미
      11/26 오늘도 감사히 잘 보고 갑니다!
    • 오빠는다르다
      감사합니다~!!!!
    • 1234
      아래처럼 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>
    • senime
      float 두번째 수업 마지막에 box-sizing:border-box 로 하고 container width 를 540px 로 했는데도 aside(=ad)부분이 오른쪽으로 옮겨지지가 않네요. 크롬 검사 부분에서도 nav,article,aside 부분을 합하면 540px로 나오는데 aside부분이 밑부분에 나오게 되네요. container width 를 541px로 하면 aside 부분이 오른쪽으로 옮겨지기는 하는데 어떤 문제인지요..ㅠㅠ
    • protester
      플렉스 빨리 베워야 겠어요~! ㅠ.ㅠ
    • 오들오들오드리
      이미지가 없을 경우. 어느 경로에 넣어줘야 할까요?
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기