8일차_수험자 제공 모의파일

수험자제공파일_모의시험.zip

15.83MB

 

실제 시험장에서 제공되는 모의시험 형태 파일입니다.

이미지는 포토샵에서 직접 사이즈 지정 고려하여 편집, 이외에 웹사이트 구성을 위한 폴더구조는 직접 짜야합니다.

제공되는 js는 script를 생성하여 넣고,css는 헤더에 연결하여 작업하시면 됩니다.

 

가상비번 (생년월일) 을 작업한 폴더에 작업본 만드시면 됩니다.

마지막날 진행예정입니다^^

 

 

<제작순서>

 

1.이미지 제작 (수험자제공내용확인하여 작업)

2.전체 레이어 구조 html마크업 진행, 전체 폴더구조 만들기 (css,script,images)

3. 전체적으로 콘텐츠가 차지할 영역 css로 틀 잡기

 

---틀완료---

 

4.html세부사항 작업하기 (메뉴, 탭, 공지사항, 갤러리등..)

- 작업후 sub-menu 가리고, 탭메뉴 display:none처리 (js작업을위해)

5. css로 slide (@keyframe, animation) 작업 진행하기

6. js로 메뉴 / 탭작업진행하기

7.나머지콘텐츠 부분 채우기

8.최종적으로 팝업창 html, script, css작업하기 (모든유형의 js,html이 같음)

 

 

====================================================================================

 

<작업을 위한 필수암기사항>

 

1.전체유형 틀 구조에 대한 이해 (container, left, right, center등 개념이해)

-전체 flex로 작업

2. 메뉴, 탭 css작업처리 디자인 이해 (유형에 따른 css변형에 대한 이해, bg가 들어가는 케이스만 특별히 다름)

3. 탭구조 tab-inner 안에 있는 버튼(active처리), tab1,tab2로 나누는 구조성에 대한 이해

4. js명령문 외우기 (유형은 약 4가지타입에서 다 끝납니다)

5. block과 inline-block, inline요소에 대한 이해 명확히 구분

6.유형별 슬라이드 이미지사이즈 다릅니다. 제작해둔 사이즈 참고해서 미리 연습해두세요.

7.position요소를 잘 사용할 수 있어야 합니다. relative, absolute가 사용되는 케이스들 결과값에서 보며 인지하기

 

====================================================================================

 

<실행이되지 않는 경우 아래 꼭 체크!>

 

1.클래스명 잘 주었는지 체크하기, 클래스에 따른 css에서 잘 지정했는지 확인하기

(.빼먹었는지 혹은 불필요하게 넣었는지 > 는 필요한 경우에 넣었는지)

2. script 하단 연결 부분 체크하기 (스크립트는 실행파일이 위로오고, 내가 제작한 것은 그 아래에 붙여야함)

3. script에 실행 class명 잘 적었는지 확인하기

4.경로 잘 들어갔는지 체크하기

5.float을 올바른 곳에 주었는지, flex를 올바른 곳에 주었는지 체크하기

 

**대부분이 오타인 경우가 많습니다. 천천히~ 신중히 풀어보세요