HTML/CSS

XHTML

CSS - Float과 Clear

WEBSP2012.02.08 11:52

조회 : 3,380

배치 속성 Float
Float은 레이아웃 구조를 만들기 위해 사용합니다.
기존 방식(Table)의 레이아웃은 퍼즐 조각과 같이 끼워 맞추는 형식이였다면,
웹 표준의 레이아웃은 원하는 위치에 배치시키는 방식입니다.
 
결과적으로 레이아웃의 구조를 설계하기 위해  사용하는 CSS 속성Float 입니다.
 
Float
Float은 레이아웃에서 가장 많이 사용되어지는 속성입니다.
엘리먼트를 왼쪽 혹은 오른쪽에 배치 시키기 위해 사용하게됩니다.
 
    float: left;   /   float: right;
 
   속성은 이렇게 두가지가 있습니다.
   float 이 적용이 되어지게 되면, 지정된 엘리먼트는 지정된 위치로 옮겨지며,
   비어있는 공간만큼 하단에 있던 엘리먼트들은 그 옆쪽으로 올라와서 붙게 됩니다.
   
   옆쪽으로 원치 않게 올라와 원하는 레이아웃을 만들지 못하게 되는 경우가 발생할 수 있습니다.
   그것을 방지히가 위해 Float과 함께 사용되어지는 속성Clear 인데, 잘 알아 두셔야 합니다.
 
   어떠한 엘리먼트에 Float이 적용 되었다면, 그 하단에 있는 것들은 무조건 그 위로 따라 올라게 됩니다.
   만약 엘리먼트가 float: left; 되었다면, 나머지 영역을 하단에 있던 엘리먼트들이 채우게 되는 것이죠.
   빈 공간이 없어 따라 올라가지 않았을때  Margin을 준다 하더라도 하단에 있는 것들은 꿈쩍도 하지 않을 것입니다.
 
   그럴때에 사용하는 것이 Clear 입니다.
 
       clear: both;
  
 
 

0개의 댓글이 있습니다.

select count(*) as cnt from g4_login where lo_ip = '3.238.184.78'

1194 : Table 'g4_login' is marked as crashed and should be repaired

error file : /bbs/board.php