html/css로 header/side menu/content/footer layout template 공유

아래와 같이 html을 구성하면, (css는 고려하지 않았는데, 필요시 style="..."를 참고)

<div style="margin:0; padding:0;"> <div style="background-color:green;">Header</div> <div style=""> <div style="width:200px; float:left; "> <div style="width:100%; background-color:blue;"> Menu </div> </div> <div style="margin-left:200px;"> <div style="width:100%; background-color:red;"> Content </div> </div> </div> <div style="display:block; clear:both; background-color:green;">Footer</div> </div>

아래와 같이 표현됩니다.

Menu가 표시된 것과 Content가 표시된 div는, width:100%가 지원되니, 나름 독립적인 design을 가져올 수 있습니다.