앞에서 플롯을 초기화시키는 방법으로 부모에 조취를 취하는 방법을 알아봤다면
이번엔 자식에 조취를 취하는 방법을 보자.

 

 


일반적으로 많이 사용되는 홈페이지 기본 레이아웃 구조는 아래와 같다.

 

 

 

 

이 레이아웃을 실전에 살짝 응용해서 코딩을 한다면,


일단 전체를 랩(wrap)으로 감싸 브라우저의 사이즈에 상관없이 가운데 정렬되게 만든 후

.wrap {width:800px; margin:0 auto;} <위드값이 들어가거나 이미지 같은것들이 받치고 있어야 함>


상단에 header를, 왼쪽 메뉴(side)와 컨텐츠부분(content)을 main으로 한번 더 감싸주고, 하단에 footer를 넣었다.

 

 

 

 

 


여기서 왼쪽 메뉴와 컨텐츠부분을 나란히 가로배치시키기 위해

둘다 float:left;를 사용하여 공중으로 띄웠으며

두 개 모두 공중에 뜬 상태이기 때문에 footer에 파란색 라인을 넣었더니

아래와 같이 main영역을 침범해 밑으로 기어들어간다.

 

 

 

 


이때 footer에 나부터는 플롯의 영향을 받지 않겠다clear:both;를 넣어주면
이제 정상적으로 footer영역에만 라인이 그어진다.

 

 

 

 

 

 

 

 

 

2013/07/07 - [말랑말랑 컴퓨터/웹표준코딩 html&css] - 플롯클리어 방법 by S

 

여기서 만약 앞 글의 overflow:hidden(넘치면 잘라라)을 사용해서 플롯초기화 시킨다면
레이어 팝업을 띄웠을때 위치에 따라 팝업이 잘리는 문제가 생기고,


display:inline-block;를 사용하여 메인을 인라인속성으로 바꿔버리면
가장 코딩이 많이 들어가야하는 main영역에서 앞으로 무슨일이 있을지 모르기 때문에


이때는 최대한 안의 영역은 건드리지 않고 바깥인 footer에서 해결하는 이 clear:both;를 사용하는 것이다.

 

 

 

 

 
 
 
 

 

 

Posted by 두여자 Y&S

댓글을 달아 주세요

  1. 비밀댓글입니다

    2013.07.19 16:39 [ ADDR : EDIT/ DEL : REPLY ]
  2. 비밀댓글입니다

    2013.07.19 16:52 [ ADDR : EDIT/ DEL : REPLY ]
  3. 잘 보고갑니다^^

    2013.08.31 12:27 [ ADDR : EDIT/ DEL : REPLY ]
  4. monica

    저 여기 자주 올래요 강의가 너무 너무 이해가 잘되게 자세하게 설명해주셔서 너무너무 좋아요.
    정말 감사합니다 :)

    2013.09.06 14:13 [ ADDR : EDIT/ DEL : REPLY ]
  5. qwer

    float 정리가 잘되어있네요 잘보고갑니다~

    2014.04.03 17:07 [ ADDR : EDIT/ DEL : REPLY ]
  6. cloud

    감사합니다. 이해가 쏙쏙 되네요. ^^

    2014.07.18 17:00 [ ADDR : EDIT/ DEL : REPLY ]