앞에서 플롯을 초기화시키는 방법으로 부모에 조취를 취하는 방법을 알아봤다면
이번엔 자식에 조취를 취하는 방법을 보자.
일반적으로 많이 사용되는 홈페이지 기본 레이아웃 구조는 아래와 같다.
이 레이아웃을 실전에 살짝 응용해서 코딩을 한다면,
일단 전체를 랩(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;를 사용하는 것이다.
'말랑말랑 컴퓨터 > 웹표준코딩 html&css' 카테고리의 다른 글
| [웹표준코딩] 간단한 메뉴만들기 연습 by S (17) | 2013.08.18 |
|---|---|
| [웹표준코딩] 간단하지만 까다로운 line-height 속성 by S (10) | 2013.08.05 |
| [웹표준코딩] 팝업등에 사용하는 배치의 속성 position(포지션) by S (10) | 2013.07.29 |
| [웹표준코딩] 플롯클리어 방법 by S (8) | 2013.07.07 |
| [웹표준코딩 가로배치의 핵심] 떠서 이동하는 float의 이해② by S (3) | 2013.06.22 |
| [웹표준코딩 가로배치의 핵심] 떠서 이동하는 float의 이해① by S (10) | 2013.06.20 |
| 블럭박스(Block box), 인라인박스(Inline box), 라인박스(Line box) by S (4) | 2013.06.14 |
| 박스모델의 연습과 멀티클래스 네임, 가상클래스 네임 by S (2) | 2013.05.24 |
| 박스모델의 이해와 리셋(reset) css by S (8) | 2013.05.14 |
| css 구조와 사용 방법 및 스타일시트 속성 by S (6) | 2013.05.13 |
