잡담소장소

div 나누는 방법 본문

Study ;3

div 나누는 방법

유부뽀 2013. 6. 18. 15:48


테이블로 하려니 style에 border가 있어서 깔끔하지 않기에 

div에서 반으로 나누는 방법을 찾아보니


style의 float를 이용한 방법이 있었다!



그러면 한줄에 두 엘리먼트를 양옆으로 두게 할 수 있는데,

CSS의 clear 속성을 이용하여 float된 엘리먼트들을 정리할 수 있다.

clear에 들어가는 값에 따라 그 다음 줄의 시작점이 달라짐.





포스팅 하지마자 찾은 글

http://www.quirksmode.org/css/clearing.html


요약하자면


1. 기존의 float를 사용하면 div의 height가 사라진다. (border 없음)

2. 새로운 element에 clear:both를 사용하면 height가 뿅 나타남

3. overflow를 사용하면 clear 따위 하지 않아도 height에 손상이 없다.

4. 그런데 overflow는 몇몇 브라우저에서는 width, height 정의해줘야함.

게다가 Explorer mac에서는 auto 속성에 무조건 scroll이 생기기때문에 hidden으로 줘야된다고 한다.. 

5. 그래서 overflow:hidden, float 속성을 주는 마지막 방법으로 완료.


글을 읽다보면 몇몇 중요한 점들도 있었는데 영어가 짧은 관계로 대충 나만 해석-_-;;;



반응형

'Study ;3' 카테고리의 다른 글

fancy box 본문의 높이 가져오기  (0) 2013.07.09
javascript date  (0) 2013.07.02
file 파일 사이즈 확인 및 삭제  (0) 2013.06.17
datepicker 범위 선택  (1) 2013.06.14
css style 메모  (0) 2013.06.03
Comments