단어 자체의 의미와 같이 float는 해당 블록 엘리먼트를 '띄우는' 역할을 합니다. 앞서 설명드릴 때 구조 자체가 브라우저의 상단에서 '쌓여' 내려온다고 말씀 드렸는데, 이 float는 그 쌓이는 속성에서 벗어나 하나의 독립된 형태로 '떠오르는' 겁니다.
2차원, 그러니까 평면에서 좌표를 나타내는 X, Y가 있습니다. 우리가 보는 웹페이지는 분명 2차원입니다만, 이론상으로 3차원의 공간을 부여할 수 있습니다. 물론 이와 관계되는 'Z-index'라는 개념이 있습니다만. 이에 대한 얘기는 등장할 곳이 아니니 그런 게 있다고만 아시면 됩니다.
어쨌든, 우리가 보는 '박스'들. 그러니까 블록 엘리먼트들이 상단에서부터 쌓여 내려오다가 'float'를 사용하여 그 박스를 여러분들의 화면 앞으로 끄집어 내면 어떻게 될까요? 중력이 지배하는 곳이라면 위의 박스들이 떨어져 내리겠지만, 웹페이지의 중력 법칙은 상단으로 작용하죠? 그래서 우리가 'float'를 사용해서 '띄워 버린' 블록 엘리먼트 뒤로 하단에 있던 엘리먼트가 올라와서 숨어버립니다.
무슨 얘기인지 확인해 보죠.
우선 지난 번과 동일한 4가지 블록 엘리먼트에 각 엘리먼트 마다 컨텐츠를 집어 넣고, CSS에서 각 엘리먼트 구분을 위해 배경색을 집어넣어서 html 파일과 CSS 파일을 생성해 보죠
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" version="-//W3C//DTD XHTML 1.1//EN" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" media="screen" type="text/css" href="./untitled.css" />
<title>float</title>
</head>
<body>
<div id="box1">When I find my self in times of trouble</div>
<div id="box2">Mother Mary comes to me</div>
<div id="box3">Speaking words of wisdom,</div>
<div id="box4">let it be.</div>
</body>
</html>
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" version="-//W3C//DTD XHTML 1.1//EN" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" media="screen" type="text/css" href="./untitled.css" />
<title>float</title>
</head>
<body>
<div id="box1">When I find my self in times of trouble</div>
<div id="box2">Mother Mary comes to me</div>
<div id="box3">Speaking words of wisdom,</div>
<div id="box4">let it be.</div>
</body>
</html>
바로 전 블록 & 인라인 엘리먼트에서 봤던 구조와 동일한 구조에다가
* {margin:0px; padding:0px;}
#box1 {background-color:red;}
#box2 {background-color:orange;}
#box3 {background-color:yellow;}
#box4 {background-color:green;}
#box1 {background-color:red;}
#box2 {background-color:orange;}
#box3 {background-color:yellow;}
#box4 {background-color:green;}
CSS에서 각 엘리먼트에 배경색을 집어 넣어봅니다.
이렇게 나오죠.
그리고 CSS에서 2번 박스에 왼쪽으로 띄우는 float를 하나 추가해 봅니다. 참고로 float의 옵션은 아직 좌측과 우측, left와 right 밖에 쓸 수 없습니다.
* {margin:0px; padding:0px;}
#box1 {background-color:red;}
#box2 {float:left; background-color:orange;}
#box3 {background-color:yellow;}
#box4 {background-color:green;}
#box1 {background-color:red;}
#box2 {float:left; background-color:orange;}
#box3 {background-color:yellow;}
#box4 {background-color:green;}
어떤가요?
하단에 있던 노란색 3번째 박스가 2번째 박스 위치로 올라와서 2번째 박스의 뒤로 들어가버렸습니다. 사실 이 화면만 보면 들어갔다고 우기는 건 곤란하기도 합니다. 3번째 박스의 컨텐츠는 분명히 '사라지지 않았고', 어찌보면 'Mother~'부터 '~wisdom,'까지 하나의 블록 엘리먼트로 이루어져있으며, 주황색 부분은 <span> 같은 인라인 엘리먼트를 사용해서 배경색만 주황색으로 만들었을지도 모를일이지요.
하지만 우리는 분명 구조를 통해 '분리된' 블록 엘리먼트를 만들었고, 더불어 블록 엘리먼트가 '완벽하게' 하나의 사각형 구획을 차지하는 것을 알고 있기 때문에. 우리는 저 주황색 뒤에 노란색 배경이 숨어있다는 것을 알 수가 있는 거죠.
그렇습니다. float는 블록 엘리먼트를 띄워주는 역할을 하기도 하지만 동시에 블록 엘리먼트를 마치 '인라인 엘리먼트'처럼 꾸며주는 역할도 하죠.
자 그럼 재미난 시도를 하나 해보죠. CSS의 3번째 박스에 clear를 집어넣습니다. clear는 float로 띄워준 블록 엘리먼트에 대해서 그만 띄우게 만드는 '해제' 역할을 합니다.
* {margin:0px; padding:0px;}
#box1 {background-color:red;}
#box2 {float:left; background-color:orange;}
#box3 {clear:left; background-color:yellow;}
#box4 {background-color:green;}
#box1 {background-color:red;}
#box2 {float:left; background-color:orange;}
#box3 {clear:left; background-color:yellow;}
#box4 {background-color:green;}
자 어찌 되었나요?
자 2번째 박스를 분명 float를 사용해 왼쪽으로 띄워주었고, 그 바로 다음 박스에서 clear를 사용해 왼쪽으로 띄운 것을 해제해 주니까, 떠오른 박스, 즉 블록 엘리먼트가 컨텐츠를 포함한 영역. 정확히 얘기해서 '가시 영역'만큼만 잘려진 채 떠올라있고, 그 하단으로 3번째 박스가 침범하지 않습니다.
더 재미난 걸 볼까요?
* {margin:0px; padding:0px;}
#box1 {background-color:red;}
#box2 {float:left; background-color:orange;}
#box3 {float:left; background-color:yellow;}
#box4 {background-color:green;}
#box1 {background-color:red;}
#box2 {float:left; background-color:orange;}
#box3 {float:left; background-color:yellow;}
#box4 {background-color:green;}
3번째 박스에서 쓰던 clear를 float로 바꾸어 봅니다.
2번 박스 하단으로 3번 박스가 침입하지 않을 뿐더러, 4번 박스는 오히려 가장 먼저 flaot을 사용한 2번 박스의 위치까지 올라가 그 뒤로 숨은 게 보입니다.
여기서 4번 박스에 clear를 걸어서 해제를 시도해 보죠.
* {margin:0px; padding:0px;}
#box1 {background-color:red;}
#box2 {float:left; background-color:orange;}
#box3 {float:left; background-color:yellow;}
#box4 {clear:left; background-color:green;}
#box1 {background-color:red;}
#box2 {float:left; background-color:orange;}
#box3 {float:left; background-color:yellow;}
#box4 {clear:left; background-color:green;}
이건 무엇을 의미하냐면, float를 해제하는 방법은 clear도 있지만, 뒤에 따라오는 블록 엘리먼트를 같은 방향으로 float를 사용하여 띄워주어도 해제가 된다는 점이죠.
주구장창 clear로 해제할 필요가 없다는 겁니다.
그럼 다시 처음으로 돌아가서.
이번엔 2번과 3번을 각각 좌측과 우측으로 띄워보죠.
* {margin:0px; padding:0px;}
#box1 {background-color:red;}
#box2 {float:left; background-color:orange;}
#box3 {float:right; background-color:yellow;}
#box4 {background-color:green;}
#box1 {background-color:red;}
#box2 {float:left; background-color:orange;}
#box3 {float:right; background-color:yellow;}
#box4 {background-color:green;}
4번 박스의 clear 부분을 일단 제거하고, 3번 박스를 오른 쪽으로 띄워봅니다. 창 크기는 그대로 둔 상태에서 이런 결과가 튀어 나옵니다.
무슨 일일까요? 자, 그럼 컨텐츠가 화면의 한 줄에 나타날 수 있도록 창을 가로로 늘여볼까요?
자, 여기서 만족하지 말고 창을 좀 더 늘여보죠.
어찌 된 건지 이제 감이 오시죠? 우선 첫 번째 그림부터 설명을 하자면 우선 2번 박스와 3번 박스 둘 다 '블록 엘리먼트'라서 독립적인 개체인데다가, 둘 다 float로 떠 있는 상태라서 브라우저 상에서 컨텐츠를 보여주기엔 너무 창이 좁기 때문에 부딪힙니다. 그래서 뒤에 따라오는 3번 박스가 하단으로 밀리는 거죠. 반면 4번 박스는 2번과 3번 둘 다 '떠 있기 때문'에 2번 아래까지 올라와서 3번 보다 위에 가 있는 듯한 모습이 나타나는 거죠.
그런데 두 번째 그림에서 알 수 있듯이, 창 넓이를 두 박스의 컨텐츠 길이에 맞게끔 늘려주면 다시금 제 자리를 잡습니다. 물론 이렇게 해도 분명히 두 개 박스가 가지고 있는 '컨텐츠'는 조금의 문제도 없이 여러분에게 '보여지고' 있죠.
세 번째 그림에 오면 다시금 '아~ 이게 뒤로 숨는다는 얘기구나'를 느끼실 수 있을 겁니다. 4번 박스의 배경색이 분명 2번과 3번 사이에서도 나타나고 있죠.
자, 그럼 여기서 4번 박스에 clear로 해제를 걸어보죠.
* {margin:0px; padding:0px;}
#box1 {background-color:red;}
#box2 {float:left; background-color:orange;}
#box3 {float:right; background-color:yellow;}
#box4 {clear:both; background-color:green;}
#box1 {background-color:red;}
#box2 {float:left; background-color:orange;}
#box3 {float:right; background-color:yellow;}
#box4 {clear:both; background-color:green;}
그러면 이런 모양이 됩니다.
4번 박스가 2번과 3번 박스의 배경으로 침투하지 않게되죠.
both를 써준 이유는 왼쪽과 오른쪽, 양쪽을 다 해제하기 위해서입니다.
아마 이 정도면 태터툴즈에서 2단형, 혹은 3단형으로 쓰이는 디자인에서 float가 어떤 기능을 하고, 그게 어떻게 나타나며, 왜 'float'를 사용해서 디자인을 하시는 지도 아실 겁니다. 창 크기를 변동하는 것에 따라서 디자인이 어떻게 달라지는지도 실험해 보실 수 있겠죠.
그리고 아마, 이 float가 가장 속을 많이 썩일 겁니다. 파이어 폭스에서는 잘 보이는 것이 익스플로러에서는 빈 공간이 나타나게되는 경우부터 시작해서, 여러분들이 CSS 값에 어떤 픽셀 값, 혹은 어떤 너비나 높이 값을 넣느냐에 따라서 디자인이 틀어질 수도, 전혀 예상치 못한 반응을 보일수도 있으니까요.
그래도 해결책은 웹에 무궁무진하게 널렸습니다.
더불어 더 나은 방법들도 많이 나와있죠.
웹페이지를 만들 때 가장 필요한 것은 '합리성과 효율성'입니다. 같은 모양을 만드는데도 수천가지 방법이 나올 수 있지만, 그 중에서 가장 '최소'의 코드를 사용하여 '최고'의 효과를 만들어 내는 게 서로에게 가장 편리합니다.
물론 삽질은 필수!
이상으로 삽질 연재, 초 특급 기본 따위 개무시, 내 맘대로 아무거나 연재를 마칩니다^^
Posted by 함장
