float 이용한 레이아웃 만들기
- 감싸는 container 박스 만들어두면 유용함 (가장 부모 요소, 싸매는 박스)
.container {
width: 800px;
}부모 태그 width 의 100% 사용
.header {
width: 100%; //800px
}float의 box error(1)
error
태그를 이용해서 박스를 배치하면 width를 제대로 정해도 박스가 아래로 배치가 됨.
why?
는 display: block을 가지기 때문에 가로행을 전부 차지한다. 그래서
는 아래로 쌓인다.
How?
옆으로 오게 하려면?
박스들에
float: left;박스 가로배치 할 때 float 사용
float: left;float의 box error(2)
error
근데 그 다음
요소를 또 만들면 안보임
why?
앞의
들에 float를 줘서 붕 떴기 때문에 요소들이 공중에 떠있기 때문에
그 자리가 비어있음. 그래서 그 위치에 다음 가 오게 되므로 안 보이는 것.
how?
float 다음에 오는 요소에게
clear: both;주면 float로 발생하는 이상한 현상 해결 가능
- float말고 inline-block으로 가로배치
display: inline-block;하고
사이의 공백 모두 제거하고 붙여쓰기
💡 inline-block사용하면 박스 사이 공백 제거가 귀찮음…
<div class="left-bar"></div><div class="content"></div>display: block (한 행을 전부 차지)
display: inline-block (내 크기만큼 차지)float 관련 문제(margin-top 안먹힘)
why?
위의 요소에 float를 주면 그 다음 요소들에 margin을 줘도 margin이 안먹힘. 왜냐하면 float를 줘서 붕떠있기 때문에 그 자리가 비어서 그 위에 margin이 있기 때문에. (margin-top 을 완전 크게 주면 되긴 하는데, 너무 비효율적)
How?
위의 요소와 아래 요소 사이에
하나 주고, 거기에 clear: both; 를 주면 제자리를 찾기 때문에 아래 요소부터는 제대로 style 줄 수 있음
💡 즉, float 준 요소 다음에 clear: both 넣은
추가
