[float] 관련하여 질문 드립니다!
이름이없다고
float 관련하여 궁금한 사항이 있어서 이렇게 글을 올려봅니다.
cnn.com 홈페이지를 보고 참고하여 연습하려하는데
한줄에 박스가 1~4개까지 나눠져 있습니다. (cnn홈페이지 참고부탁드려요!)
div태그를 기본으로 position은 쓰지않고 float만 사용하여 만들고 있습니다.
그런데 만들다보니 문제점들이 하나하나 나타나기 시작하였습니다.
우선은 박스들의 위치인데요... float:left;를 활용하여 px로 위치를 정하다보면
단위가 너무 커져버린다는 점입니다. 제 모니터 해상도는 1920x1080입니다.
박스들을 중앙에정렬해야하는데 낮은 해상도를 생각했을때는픽셀단위가
무작정 커져서는 안되는거 아닌가요? 그래서 %를 썼는데 요즘은 %를
잘 쓰지 않는다고 하네요ㅠ_ㅠ
그리고 두번째 문제점은 창을 축소 시켰을때 전부다 제멋대로 놉니다...
창을 최대화 시켜놨을때는 괜찮은데 축소시켰을때는 첫줄에 있어야할 박스가
밀려서 둘째줄에 가있고 작은 박스들도 이상한곳에 가있고...
clear?처리를 한다는건 무슨 의미인가요? clear를 주면 창을 축소했을때
박스들이 마구잡이로 움직이지 않고 제자리에 가만히 있는건가요?
#mini01 { background-color:#ffffff; width:240px; height:245px; float:left; margin-left:23%; margin-top:10px; }
#mini02 { background-color:#ffffff; width:240px; height:245px; float:left; margin-left:0.7%; margin-top:10px; }
#mini03 { background-color:#ffffff; width:240px; height:245px; float:left; margin-left:0.7%; margin-top:10px; }
#mini04 { background-color:#ffffff; width:240px; height:245px; float:left; margin-left:0.7%; margin-top:10px; }
스타일시트의 일부분입니다. 이런식으로 스타일을 주었습니다!
1.%를 쓰지않고 px단위가 너무 커지지 않으면서 중앙정렬 하는방법!
2.창을 축소했을때도 스크롤을 굴려도 박스들이 제자리에 있게 하는 방법!
하코수다님들 자세하고 많은 답변 좀 부탁드리겠습니다 ㅠ_ㅠ
-
주나
좋은 답변 감사드립니다! 덕분에 박스들이 무사히 제자리를 찾아갔습니다! 감사합니다+ㅁ+
-
맑다
1. cnn홈페이지는 컨텐츠들을 감싸는 div가 있네요. 이 div에 폭을 고정시켜 놓고 그 안에서 float시킨거거든요.... 보여주신 소스로는 감싸는 div를 적용하셨는지 확인할수가 없는데... 이것부터 한번 보심이 좋을듯.. 가운데 정렬이야 감싸는 div에 margin:0 auto를 주면 되겠구요..
2. 마찬가지로 감싸는 div에 width값을 고정시키면 창 크기를 줄여도 레이아웃이 깨지지 않겠죠.