div 태그의 float 속성
페이지 정보
작성자 서방님 댓글 0건 조회 123회 작성일 12-05-30 15:20본문
<div>태그를 float로 쓰면 자신이 가진 컨텐츠 양만큼만 넓어진다.
float를 쓰면 block과 inline개념이 아예 없어짐을 유의한다.
float는 레이아웃을 잡을 때 쓴다. width와 height 값을 쓴다. width와 height값을 쓰지 않으면 컨텐츠 양만큼만 넓어진다.
float를 쓸 때는 꼭 float를 쓴 태그의 부모요소에도 알려야 하거나 float선언을 해제시켜줘야 한다.
그렇지 않으면 부모div는 자식을 제대로 감싸지 못하여 다음에 오는 요소들과의 레이아웃이 깨지는 현상이 발생한다.
이를 해결하는 방법은 여러가지가 있고 그 중 적절한 방법을 쓰면 된다.
방법1.
float 되었음을 형제 Level에 알려준다.
clear:both는 float상태에서 벗어나 본래의 div속성인 block화 되어 위치가 엔터 상태가 된다.
대표적으로 푸터영역에서 쓰일 수 있다.
|
<div id="test1"> <div class="test2">left</div> <div class="test3">right</div> <div style="clear:both"></div> <!-- clear:both 선언한 태그의 자신부터 float가 해제된다 --> </div>
|
방법2.
|
<style type="text/css"> #test1 {float:left; padding:50px; background:orange;} <!-- 자식이 float되었으므로 부모에게도 float 선언하여 자식이 float 되었음을 알려준다. --> .test2 {float:left; margin-right:50px; background:red;} </style> <div id="test1"> |
방법3.
대표적으로 <li>태그를 이용하여 리스트를 마크업할때 많이 쓰인다.
|
<style type="text/css"> /* 부모한테 overflow:hidden; zoom:1;을 줘서 자식이 float임을 알려준다.*/
<div id="test1">
|
대부분 방법3을 기준으로 쓰되 상황에 따라 방법2와 방법3을 쓰도록 한다.
탭 만들기
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
|
<style type="text/css">
/* 탭 */ background:url(이미지파일path) left bottom repeat-x;} /* 자식이 float이므로 float 선언해준다. */ border-bottom:none;} /* 자식이 float이므로 float 선언해준다. 텍스트가 탭의 가운데에 오도록 하며 세로크기의 온전한 링크영역을 위해 line-height:50px; */ /* a는 inline요소이므로 원하는 width값과 height값만큼 링크 영역을 잡을 수가 없다. 그래서 float:left;를 쓴다. float:left를 쓰면 width값 height값이 먹으므로.. display:block 을 쓰기도 한다.*/ .tab li.current {background:white;} /* li.current는 li 태그 안에 current를 의미, li .current는 li 태그의 하위를 의미 */
<ul class="tab">
|
댓글목록
등록된 댓글이 없습니다.
