DIV를 CSS로 제어하는 법 무려 두번째.

..그림 그리는 법도 아니고 이런 내용을 연재하게 되다니..

[CSS로 레이아웃 만들기 ~1]에서는 position이 뭐하는 녀석인지를 설명했었다.

어쩌다보니 그렇게 된 것이긴 하지만 왠지 div의 위치 조절이 우선이 된 듯 하므로

오늘은 좌우를 결정하는 float에 대하여 이야기하겠다.

[~1]에서 position을 설명하기 위해 썼던 Blue Plate의 영역을 구분해 놓은 스크린샷.

콘텐트 상자 오른쪽에 사이드바가 붙어서 상단/우측메뉴/내용의 3단 레이아웃 형태를 띄고 있다.

float은 위와 같이 어떤 상자를 다른 상자 옆에 붙이고 싶을 때에 사용하는 속성으로,

position처럼 브라우저 종이에 div 종이를 위에 잘라 붙이는 식이 아닌,

브라우저 종이에 다른 상자와 겹치지 않게 상자를 그리는 방식이라고 생각하면 된다.

위의 그림에서 보듯이, position은 div의 크기를 잘못 지정했다가는 상자끼리 겹치게 된다.

하지만 float은 기본적으로 상자가 겹치지 않도록 한쪽에 몰아서 상자를 그리는 속성이기 때문에

div끼리 겹쳐져서 내용이 가려지는 경우는 절대로 없다.

사실, float은 단어의 뜻 그대로 '둥둥 떠있는 div'라는 말로 브라우저 종이에서 살짝 떠있는 녀석이다.

하지만 float의 '내용을 절대 가리지 않는' 속성을 설명하기엔 겹치지 않게 그린다는 쪽이 더 나은 듯 하여

float의 원래 의미와는 약간 다른 의미로 설명을 하였다.

float의 옵션은 왼쪽과 오른쪽, left와 right로,

해당 div를 왼쪽과 오른쪽 중 어디로 밀어서 그려넣을 건지를 결정하는 요소이다.

float:left; 로 사용하면 해당 속성을 가진 상자는 같은 줄의 다른 상자 왼쪽에 붙는다.

물론, float:right; 의 경우엔 오른쪽에 가서 붙게 된다.

 #widget{border-right:1px solid #bbb; clear:both; float:left; width:180px; padding:5px 6px 5px 12px; margin: 0 0 20px 5px;}

#columnRight { position:relative; width:199px; margin-top: 10px; margin-bottom: 10px; padding:10px 5px 10px 5px; float:right; background-color:#ffffff; border-left:1px solid #dddddd }
#columnLeft { width:680px; float:left; margin:5px 0px 0px 0px; padding:25px 10px 25px 10px; background-color:#ffffff; }

위의 스크린샷이 float으로 메뉴를 왼쪽으로 밀어 그린 경우이고

아래의 스크린샷이 메뉴를 오른쪽으로 밀어 그린 경우이다.

만약 마음에 드는 레이아웃을 발견했는데 사이드바의 위치가 마음에 들지 않는 경우,

그런데 심지어 해당 레이아웃에 사이드바 위치 옵션이 없어서 직접 수정을 해야 하는 경우엔

사이드바 div의 속성 부분을 찾아 float의 옵션을 바꿔주면 되는 것이다.

그런데 이 편리한 float에게는 주로 2가지 문제가 있는데

그 중 첫번째는 float의 옵션이 다음 div에 까지 영향을 미쳐서 배열이 이상해지는 경우이다.

예를 들어, CSS에서 파란색 사이드바에 float:right;를 준 후,

녹색 footer에 position이나  float등의 속성을 지정해주지 않은 상태에서

HTML에 레이아웃에 나타나야 하는 순서대로 분홍색 내용 상자, 파란색 사이드바, 녹색 footer를

순서대로 불러온 경우 아래와 같은 화면이 날 반기게 된다.

보통 레이아웃에는 내용 부분과 사이드바가 있고, 그 아래에 footer가 붙어있어야 한다.

그래서 HTML을 쓸 때 순서대로 내용, 사이드바, footer의 순서로 div를 가져온다.

그런데, float으로 오른쪽에 붙여 그리기 시작한 사이드바의 div때문에

그 아래에 불러온 footer가 내용과 사이드바의 아래가 아니라 그냥 사이드바 아래에 붙은 것이다.

이럴 때의 해결책으로 쓸 수 있는 것은 2가지 정도가 있다.

첫째는 내용 상자와 사이드바 상자를 다른 커다란 상자안에 넣어버리는 방법이다.

위 그림처럼 내용 상자와 사이드바를 노란색 큰 상자 안에 넣어서 배열한 후,

노란 상자의 아래에 footer를 쓰면 footer가 제대로 된 위치에 가서 붙어있게 된다.

또한, 노란 상자의 세로가 내용 상자와 사이드바 중 긴 쪽에 맞춰서 늘어나기 때문에

둘 중 세로가 짧은 쪽의 남은 부분은 자동으로 여백이 되게 된다.

대부분의 레이아웃이 사용하는 방식으로 HTML은 이런 식으로 배열되어 있다.

 <div id="노란상자"> <!-- 노란상자 시작 --!>
        <div id="분홍상자">이 부분에 내용을 넣습니다.</div> <!-- div를 불러왔을 땐 끝을 </div>로 꼭 닫아 줍시다. --!>
        <div id="사이드바">이 부분에 사이드바 내용.</div>
</div> <!-- 노란상자 끝 --!>
<div id="footer">footer의 내용.</div> 

이렇게 HTML을 쓰면 사이드바에 어떤 float이 있든 상관없이

노란색 상자 뒤에 소환된 footer는 무조건 노란색 상자의 아래에 가서 붙어있게 된다.

실례를 보면 다음과 같다.

/* CSS 코드 */

#header { position:relative; width:920px; height:120px; background:url(../images/default/bgHeader.png) no-repeat left top; z-index:99;}
#contentBody { position:relative; width:910px; padding: 0 5px 0 5px; background:url(../images/default/bgcon.png); *zoom:1;}
#columnRight { position:relative; width:199px; margin-top: 10px; margin-bottom: 10px; padding:10px 5px 10px 5px; float:right; background-color:#ffffff; border-left:1px solid #dddddd }
#columnLeft { width:680px; float:left;  margin:5px 0px 0px 0px; padding:25px 10px 25px 10px; background-color:#ffffff; }
#footer { width:920px; height:60px; margin:0; padding:0; background:url(../images/default/bgfoot.png) left top repeat-x; clear:left; }

<!-- HTML 코드 : div 안에 들어가는 복잡한 내용은 생략합니다. --!>

<div id="header">
헤더에 들어가는 메뉴, 검색 폼
</div>
<div id="contentBody">
       <div id="columnLeft">
              내용 부분
       </div>
       <div id="columnRight">
              서브메뉴와 위젯 부분
       </div>
</div>
<div id="footer">
풋터에 들어가는 내용
</div>

이렇게 불러올 경우엔 중간, 내용과 사이드바를 가지고 있는 div에 배경이나 외곽선등을 넣으면

중간 부분 전체에 적용이 되기 때문에 많은 레이아웃들이 위의 방식을 이용하고 있다.

계속 예시로 등장하는 Blue Plate의 경우도 중간의 큰 상자에

파란색 외곽선이 들어간 배경 그림을 넣어 외곽선을 만들어 놓은 레이아웃이다.

브라우저 전체의 배경색과 내용, 사이드바의 배경색을 다르게 하여 구분하고 싶을 경우엔

큰 상자를 써서 그 안에 넣어두는 방식을 사용하도록 하자.

두번째로는 clear 속성을 써서 float을 끊어버리고 원래 자기 위치에 가도록 하는 방법이다.

곤란하게 되어버린 이런 레이아웃이 있다고 하자.

이 상황에서 큰 div를 또 만들어 넣을 필요가 굳이 없는데다가 div 속성을 또 적기도 귀찮다면

녹색 상자의 CSS에 clear:both; 를 추가해서 주황색 위치로 보낼 수 있다.

clear는  float의 영향을 없애버리고 원래 자기 위치에 가서 배열되도록 하는 속성으로

HTML에서 원래 자기 위치란 위에서 아래로 죽 배열되는 그 위치를 말한다.

옵션으로 left, right, both를 가지는데, 일반적으로 both를 사용하면 알아서 제 위치에 가게 된다.

특별히 왼쪽이나 오른쪽 중 한 쪽으로 붙이고 싶을 때에 left와 right을 사용한다.

float을 사용했을 때 주로 발생하는 두번째 문제는 사이즈가 안 맞아서 상자가 어긋나는 경우이다.

이 경우는 내용과 사이드바를 큰 div안에 넣어 두었을 때, 큰 div의 가로보다

내용 div의 가로와 사이드바의 가로의 합이 더 클 때 발생한다.

왼쪽으로 가라고 해서 가긴 갔는데, 그냥 왼쪽에 붙어있으려고하니 지정된 가로가 나오질 않아서

사이드바가 내용 아래로 내려가 자신의 가로 길이를 유지한 채 왼쪽에 붙어버리는 것이다.

이때엔 CSS에서 각 div의 width 속성을 찾아 가로 길이를 조정해주면 해결된다.

 #columnLeft { width:680px; float:left;  margin:5px 0px 0px 0px; padding:25px 10px 25px 10px; background-color:#ffffff; }

위에서 width 부분이 가로 길이를 지정해준 부분.

저 부분의 옵션을 '숫자px', '숫자%'로 적어넣으면 해당 div의 가로가 정해진다.

%를 사용하여 크기를 지정할 경우엔 브라우저의 크기나 큰 상자의 크기에 따라 가로가 변하여

열심히 배열해 둔 div안 요소들의 모양이 망가질 수 있으므로 되도록 px을 사용하도록 하자.

의외로 또 내용이 길어진 관계로 오늘은 여기까지.

간혹 div의 가로를 잘 지정해주었음에도 불구하고 위의 그림처럼 어긋나는 경우가 있는데

그건 대부분 margin이나 padding이 차지하는 공간을 계산하지 않아서 생기는 문제이다.

그래서 기왕이면 오늘 margin과 padding도 설명하려고 했지만 다음으로 미뤄야 할 듯..;;

그리하여 다음 편 예고 : div가 실질적으로 차지하는 공간을 지정하는 속성들