플롯 기초, 플롯을 이용한 레이아웃

카테고리 없음

플롯 기초, 플롯을 이용한 레이아웃

draw-hee 2011. 1. 16. 18:58

플로트된 박스의 방향을 지정. 플로트 된 요소는 원래의 속성에 관계없이 블록레벨박스를 만들어 낸다. 대체되지 않는 요소가 플로트된 경우 정확한 크기를 지정하지 않으면 최대한 얇은 상자가 된다. 플로트된 박스를 감싼 박스는 크기를 지정하거나 플로트를 지정해야 한다.

float적용 예제

<style type="text/css">
#wrap{border: 1px solid black;}
#box{width:100px; height:100px; border:1px solid red; float:left;}
</style>
</head>

<body>
<div id="wrap">
    <div id="box">box area</div>
    <div id="box">box area</div>
</div>
</body>

상위 박스에 플로트 추가 적용 시.

#wrap{border: 1px solid black; float:left;}

안쪽 박스에 마진 적용 시

<style type="text/css">
#wrap{border: 1px solid black; float:left;}
#box{width:100px; height:100px; border:1px solid red; float:left; margin:20px;}
</style>
</head>
<body>
<div id="wrap">
    <div id="box">box area</div>
    <div id="box">box area</div>
    <div id="box">box area</div>
    <div id="box">box area</div>
</div>
</body>

익스플로러에서는...

해결 방안으로 다음과 같이 적용한다.

<style type="text/css">
#wrap{border: 1px solid black; float:left; padding-bottom:20px;}
#box, #boxFirst, #boxLast{width:100px; height:100px; border:1px solid red; float:left; margin:20px; margin-bottom:0;}
* html #boxFirst{margin-left:10px;}
* html #boxLast{margin-right:10px;}
</style>
</head>
<body>
<div id="wrap">
    <div id="boxFirst">box area</div>
    <div id="box">box area</div>
    <div id="box">box area</div>
    <div id="boxLast">box area</div>
</div>
</body>

다시 돌아가서 wrap의 가로 크기를 지정한다면(안쪽 박스가 2개 들어갈 크기) box는 밑으로 줄바꿈 될 것이다. 그럴 경우 마진 값은 상하의 마진이 겹치지 않고 더해진다는 점을 주의한다.

<style type="text/css">
#wrap{border: 1px solid black; float:left; width: 286px;}
#box{width:100px; height:100px; border:1px solid red; float:left; margin:20px;}
</style>
</head>
<body>
  <div id="wrap">
    <div id="box">box area</div>
    <div id="box">box area</div>
    <div id="box">box area</div>
    <div id="box">box area</div>
</div>
</body>

플로트 지정할 때 width가 반드시 필요하지는 않다. padding으로도 가능하다. 가로 내비게이션을 만들 때는 각 메뉴의 크기가 같지 않으므로 padding을 활용하는 것이 유용할 것이다.

<style type="text/css">
#wrap{border: 1px solid black; float:left;}
#box{padding:10px; border:1px solid red; float:left; margin:20px;}
</style>
</head>
<body>
<div id="wrap">
    <div id="box">box area</div>
    <div id="box">box area</div>
    <div id="box">box area</div>
    <div id="box">box area</div>
</div>
</body>

float을 이용한 크로스브라우징 레이아웃

1column, center

<style type="text/css">
*{margin:0; padding:0;}
#contents{width: 800px; background:orange; margin:0 auto;}
</style>
<body>
<div id="contents">
   <p>contents area</p>
   <p>contents area</p>
   <p>contents area</p>
   <p>contents area</p>
   <p>contents area</p>
</div>

2column, float

<style type="text/css">
*{margin:0; padding:0;}
#side{width:30%; background:gray; float:left;}
#contents{width: 70%; background:orange; float:right;}
</style>
<body>
<div id="side">
   <p>Side Menu</p>
</div>
<div id="contents">
<p>contents area</p>
<p>contents area</p>
   <p>contents area</p>
   <p>contents area</p>
   <p>contents area</p>
</div>

2column, center, float, margin, clear

<style type="text/css">
*{margin:0; padding:0;}
#wrapper{width:800px; margin:0 auto;}
#side{width:180px; background:gray; float:left;}
#contents{background:orange; margin-left:200px;}
#footer{height:50px; background:#ccc; clear:both;}
</style>
<body>
<div id="wrapper">
<div id="side">
     <p>Side Menu</p>
</div>
<div id="contents">
    <p>contents area</p>
    <p>contents area</p>
    <p>contents area</p>
     <p>contents area</p>
     <p>contents area</p>
</div>
   <div id="footer">
     <p>foot area</p>
   </div>
</div>

3column, center, float, margin, clear

<style type="text/css">
*{margin:0; padding:0;}
  #wrapper{width:800px; margin:0 auto;}
  #sideLeft{width:150px; background:gray; float:left;}
  #sideRight{width:150px; background:gray; float:right;}
  #contents{background:orange; margin-left:160px; margin-right:160px;}
  #footer{height:50px; background:#ccc; clear:both;}
</style>
<body>
<div id="wrapper">
<div id="sideLeft">
     <p>Left Menu</p>
  </div>
  <div id="sideRight">
     <p>Right Menu</p>
  </div>
  <div id="contents">
     <p>contents area</p>
     <p>contents area</p>
    <p>contents area</p>
    <p>contents area</p>
    <p>contents area</p>
  </div>
<div id="footer">
     <p>foot area</p>
</div>
</div>
</body>

float 적용 시 :after 사용 방법

플롯을 지정한 블록을 #container 로 감싼다.

#container:after 에서 :after 는 해당 선택자의 마지막 위치를 가리킨다. 그 위치에 content 속성으로 빈요소를 만들고, 블록설정한 후 clear를 지정한다.

이런 방법으로 본문에 해당하는 #container 에 배경을 지정하거나 마진값을 적용할 수 있다. (#container 에 float을 지정하는 방법은 결과적으로 float이 남발될 수 있는데 이런 방법으로 그런 문제를 피할 수 있겠다.)

<style type="text/css">
*{margin:0; padding:0;}
  #wrapper{width:800px; margin:0 auto;}
  #container{*zoom:1}

#container:after{content:"";display:block;clear:both}

#sideLeft{width:150px; background:gray; float:left;}
  #sideRight{width:150px; background:gray; float:right;}
  #contents{background:orange; margin-left:160px; margin-right:160px;}
  #footer{height:50px; background:#ccc; clear:both;}
</style>

저작자표시 비영리 변경금지 (새창열림)