E 유형 정리

1.  E 유형 와이어프레임 분석

 

E-1	E-2

 

=====E-1, E-3 공통 스타일=====
body{ width: 100%; height: 100vh; min-width: 1000px; min-height: 820px;}
header{ float: left; }
.hwrap{ width: 200px; height: calc(100vh - 100px); min-height: 720px; float: left; }  /* .hwrap : header에 종속되는 div로 한번 더 묶음 */
.bwrap{ width: calc(100% - 200px); height: calc(100vh - 100px); min-height: 720px; float: right; }   /* .bwrap : B + C */
.contents{ width: 400px; height: 100%; float: left; }   /* .contents : C영역 */
.slide{ width: calc(100% - 400px); height: 100%; float: right; }   /* .slide : B영역 */
footer{ float: left; }
.fwrap{ width:100%; height: 100px; float:left; }

cf) % 와 vw / vh 의 차이

%	vw / vh
스크롤바 영역 미포함	스크롤바 영역 포함
100% : 스크롤 바 X	100vw / 100vh : 스크롤 바 발생