자격증7 A~F 유형 총정리 1. 유형별 와이어프레임 분석 * 'width ・ height 100%' 의미 : 브라우저 가득Type와이어프레임wrap 영역contents 영역반응형Awidth 1200px(가운데 정렬)N/A반응형X(크기 고정, 가운데 정렬)Bwidth 100%width 1200px(가운데 정렬)일부 반응형(A, D 영역만; 화면에 꽉참)Cwidth 1000px(왼쪽 정렬)N/A반응형X(크기 고정, 가운데 정렬)Dwidth 100%calc 함수 계산(B 영역)반응형O(전체영역; 화면에 꽉참)Ewidth 100%,height 100%calc 함수 계산(B 영역)반응형O(전체영역; 화면에 꽉참)Fwidth 100% width 1340px(가운데 정렬)height 임의 지정(C 영역)*C 영역의 Link 위치가 B 영역의.. 2024. 5. 24. 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. 이전 1 2 다음
