분류 전체보기192 F 유형 정리 1. F 유형 와이어프레임 분석 F-1F-3=====F-1, F-3 공통 스타일=====html, body{ min-width: 1340px; }header{ width: 1340px; height: 100px; }.hwrap{ width: 1340px; height: 100%; } /* .hwrap : header에 종속되는 div로 한번 더 묶음 */.slide{ width: 100%; height: 350px; position: relative; } /* .slide : B영역 */.contents{ width: 1340px; height: 550px; position: relative; margin-top: -100px; } /* .contents : C영역 */footer{ width.. 2024. 5. 24. E 유형 정리 1. E 유형 와이어프레임 분석 E-1E-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 */.cont.. 2024. 5. 24. D 유형 정리 1. D 유형 와이어프레임 분석 D-1D-3=====D-1, D-3 공통 스타일=====body{ min-width: 1200px; min-height: 950px; }header{ width: 200px; float: left; }.hwrap{ width: 200px; height: 850px; float: left; } /* .hwrap : header에 종속되는 div로 한번 더 묶음 */.slide{ width: calc(100% - 200px); height: 400px; float: right; } /* .slide : B영역 */.contents{ width: calc(100% - 200px); height: 450px; float: right; } /* .contents : C영역 */.. 2024. 5. 24. C 유형 정리 1. C 유형 와이어프레임 분석 C-1C-3=====C-1, C-3 공통 스타일=====body{ width: 1000px; height: 650px; }header{ float: left; }.hwrap{ width: 200px; height: 650px; float: left; } /* .hwrap : header에 종속되는 div로 한번 더 묶음 */.slide{ width: 800px; height: 350px; float: right; } /* .slide : B영역 */.contents{ width: 800px; height: 200px; float: right; } /* .contents : C영역 */footer{ float: right; } .fwrap{ width: 800px; he.. 2024. 5. 24. B 유형 정리 1. B 유형 와이어프레임 분석 * A, D 영역의 넓이는 브라우저 전체 넓이(100%) 지정B-1B-2=====B-1, B-2 공통 스타일=====html, body{ min-width: 1200px; }header{ width: 100%; height: 100px; }.hwrap{ width: 1200px; } /* .hwrap : header 랑 동등한 계층의 div로 한번 더 묶음 */.bwrap{ width: 1200px; height: 500px; } /* .bwrap : B + C */.slide{ width: 1200px; height: 300px; } /* .slide : B영역 */.contents{ width: 1200px; height: 200px; fl.. 2024. 5. 24. A 유형 정리 1. A 유형 와이어프레임 분석 A-1A-4=====A-1, A-4 공통 스타일=====body{ width: 1200px; }header{ width: 1200px; height: 100px; position: relative; }.hwrap{ width: 1200px; height: 100px; position: absolute; } /* .hwrap : header에 종속되는 div로 한번 더 묶음 */.bwrap{ width: 1200px; height: 500px; } /* .bwrap : B + C */.slide{ width: 1200px; height: 300px; position: relative; overflow: hidden; } /* .slide : B영역 */.conten.. 2024. 5. 24. 이전 1 ··· 25 26 27 28 29 30 31 32 다음
