float속성과 중첩 박스

[ 박스를 가로로 배치하는 float속성 ]
float속성은 사전적인 의미로 '떠오르다', '떠다니다'라는 의미를 가지고 있다.\

웹 페이지에서는 float를 이용해 박스를 왼쪽이나 오른쪽으로 배치할 때 사용한다.
만약 배치 하지 않을 경우 float:none;속성이나 clear속성을 이용한다.

- float : left; 박스를 영역의 왼쪽으로 배치한다.
- float : right; 박스를 영역의 오른쪽으로 배치한다.
- float : none; 박스를 배치하지 않음.

 

[ float를 해제하는 clear속성 ]
float이 적용된 박스는 해당 위치로부터 살짝 멀어지게 된다.
아래에 있는 박스들은 빈 공간을 채우기 위해 위로 치고 올라오는  현상이 생기는데,

이 현상을 막고 박스를 위에서 아래로 배치하려면 clear속성을 이용한다.

- clear : none; 기본값으로 clear속성을 사용하지 않은 것과 같다.
- clear : left; 왼쪽으로 적용된 float속성을 해제한다.
- clear : right; 오른쪽으로 적용된 float속성을 해제한다.
- clear : both; 모든 float속성을 해제한다.

float속성 코드

 

(좌)전체 창에서의 모습 / (우)창의 크기가 줄어 들었을 때 모습

 

예제로 float속성과 clear속성을 적용하여 3x3 으로 박스를 나열해보았다.

전체적으로 float : left; 를 적용하면 왼쪽으로 박스를 나열되는데 여기에 2번째와 3번째 줄이 시작되는 박스인

name4와 name7에 clear : both; 를 적용하여 3x3으로 나열 되게 하였다.

창을 줄이고 늘렸을 떄 name3,6,9 박스는 빈공간을 채우기 위해 움직이지만 name4와 name7은 float속성이

해제 되었기 때문에 아래로 움직인다.

---

 

[ 중첩 박스란? ]
박스에도 부모자식 관계가 있다.
감싸고 있는 박스를 부모박스라 부르고, 안에 들어있는 박스를 자식 박스라고 부른다.
중첩 박스는 곧 부모자식 관계를 가진 박스를 의미하고, 박스를 정렬하는 방법이 중요하다.

★가장 큰 박스부터 작은 박스 순으로 작업해야한다. ★

중첩 박스 만들 코드

중첩 박스 예제

height: 50px;
line-height: 50px;

그리고 이렇게 박스 높이와 행의 높이를 동일하게 적용하면 텍스트가 가로 가운데로 정렬된다.

 

부모박스와 자식박스의 순서와 정렬 속성을 잘 기억해야 예제처럼 만들 수 있었다.