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;
}
해결방법
