css레이아웃 float

aerirang647·2020년 1월 28일
0

float이란

레이아웃을 잡는데 사용하는 CSS프로퍼티 이다.
float은 이미지 주위를 텍스트로 감싸기 위해 만들어진 것이다.

 img {
   float: right;
   margin: 0 0 lem lem;
 }
 


clear

clear 프로퍼티는 float의 동작방식을 제어하는 데 중요하다.

   html
   <div class = "box">...</div>
   <section>...</section>
  
   css 
   .box {
     float: left;
     width:200px;
     height: 100px;
     margin: lem;
   }
   

   css
   .box {
     float: left;
     width: 200px;
     height: 100px;
     margin: lem;
   }
   .after-box {
     clear: left;
   }
   

양쪽, 오른쪽, 왼쪽 모두 비울 수 있다.


clearfix 핵

float을 사용할 때 때때로 일어날 수 있는 이상하고 바람직하지 않는 경우.

   img {
     float: right;
   }
   

여기서 해결방법이 clearfix다.
다음과 같은 css코드를 추가해보자.

   .clearfix {
     overflow: auto;
   }
   
   

**이 기법은 근래에 나온 브라우저에만 동작한다. IE6를 지원하고 싶다면 다음과 같은 코드를 추가해야 한다.**

     css
     .clearfix {
       overflow : auto;
       zoom: 1;
     }
     
     
     

float을 이용한 레이아웃 예제

float을 이용해 전체 레이아웃을 잡는 일도 굉장히 자주 접할 수 있다.
이제 앞에서 position으로 잡은 레이아웃을 float으로 잡은 레이아웃 예제이다.

  css
  nav {
    float:left;
    width: 200px;
  }
 section {
   margin-left: 200px;
 }

-> 이 예제에서 페이지를 줄이면 nav의 width 200px은 그대로 있고 다른것만 줄어든다.

그러나 퍼센트 너비로 하면 페이지 크기를 줄여도 일정 모두 그 페이지의 정해진 퍼센트 만큼 차지하게 된다.

   article img {
     float : right;
     width : 50%;
   }
   


퍼센트 너비 레이아웃

레이아웃을 잡는 데 퍼센트를 쓸 수도 있지만 이렇게 하면 작업량이 많아질 수 있다.
이 예제에서 창의 너비가 너무 좁을 경우 nav콘텐츠가 지저분하게 표시되기 시작한다.
결국, 콘텐츠에 알맞는 방식을 선택할 필요가 있다.

  nav {
    float: left;
    width : 25%;
  }
  section {
    margin-left: 25%;
  }
  


미디어 쿼리

"반응형 디자인"

미디어 쿼리는 반응하는 사이트를 만드는 가장 강력한 도구이다.
아래는 퍼센트 너비로 레이아웃을 만들고 메뉴를 사이드 바에 놓기엔 브라우저 창 크기가 너무 작아서 메뉴를 한 칼럼 내에 표시되도록 만들어보는 것이다.

@media screen ans (min-width:600px) {
  nav{
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}
@media screen and (max-width:599px) {
  nav li {
    display : inline;
  }

여기에서 더 줄여서 최소 값을 지나면..

이렇게 변해 레이아웃이 모바일 브라우저에서도 멋지게 보이게 된다.

https://mediaqueri.es/
에서 미디어 쿼리를 이용해 만든 다양한 사이트를 볼 수 있다.

min-width와 max-width 말고도 다양하니 MDN문서를 참고.!

++메타뷰포트를 이용하면 레이아웃을 모바일에서도 훨씬 더 나은 모습으로 보이게 할 수 있다.


박스 그리드 만들기-float보단 inline-block을 이용

   힘든방법 (float를 이용)
   .box {
     float: left;
     width: 200px;
     height: 100px;
     margin: lem;
   }
   .afterbox {
     clear: left;
   }


  쉬운 방법(inline-block 을 이용) 
  .box2 {
    display: inline-block;
    width : 200px;
    height: 100px;
    margin: lem;
  }
  
  


해결방법

profile
👩🏻‍💻Frontend Web Developer

0개의 댓글