STUDY/자격증

웹디자인 기능사 실기 벼락치기 요점정리

NightOwl 2019. 3. 5. 21:50
728x90


급하게 컴퓨터 그래픽스 필기와 과목이 비슷하다는 말에

웹디자인 기능사 필기도 응시했고, 어렵지 않게 합격할 수 있었다.


어느덧 미루고 미루던 실기시험 날짜가 오고있다.

시험신청은 지난달에 했는데, 역시나 미루고~ 미루다~ 공부를 하나도 안하고

오늘 처음으로 공개문제를 다운 받는다.


하루에 1시간씩 일주일만 봐보자!!


웹디자인 기능사 실기시험문제



너무 길어서 중요한것만 요점 정리를 해보았다.



벼락치기용 유의사항


1. HTML, CSS, JavaScript 총 파일 3개를 만든다. (이미지랑 jQuery 리소스는 제공된다)

2. charset utf-8 으로 설정한다.

  1) HTML : <meta charset="uft-8">

  2) CSS : @charset "utf-8";

3. 전체영역 960px X 1200px 및 Header, Main , Contents, Footer의 height 값은 시험지에 주어진 값을 따라야 한다.

4. 위 알려준 사이즈 외에는 수험자가 임의로 정해서 구성한다.

5. 텍스트간의 중요성을 직관적으로 구별 가능해야 한다. → 텍스트 html 태그의 고유한 속성들을 잘 이용해야한다. 

6. <a>태그에 href="#none" 및 <img>태그에 alt 값이 모두 들어가야 한다.

7. 제출방법

  1) 최상위 폴더에 index.html로 저장하여 제출

  2) images, script, css 각 각의 폴더 저장

8. 폴더용량이 5MB 초과하면 실격!!



벼락치기용 작업시작!!

급하게 푸는 웹디실기 문제풀이급하게 푸는 문제풀이

(사진에 style 오타가 있다...-_-^)


1. 이미지파일, js 파일, css 파일을 알맞게 넣어 줄 각각의 폴더를 위 처럼 만든다.

2. index.html 파일을 만든다.

 1) html5 문서 doctype을 선언해준다.  

 2) 메타태그를 이용해 캐릭터셋을 utf-8로 설정한다.

 3) 스타일 시트를 연결한다. 

 4) 크게 <html> <head> <body> 영역을 구분지어준다.

3. 시멘틱 태그를 이용해야 하니까 body 태그안에

<header>

</header>

<section id="contents">

</section>

<footer>

</footer>

이렇게 구조를 짠다.

4. 제공된 와이어 프레임에 맞춰 구조를짜고 CSS를 빠르게 입혀준다.

  (눈대중으로 하는 CSS이기 때문에 괜히 집착해서 시간투자를 하지 않는것이 좋다.)

5. 이제 문제는 JQuery. 

나는 복붙만 해봤지 무의 상태에서 전혀 할 줄 모른다.  


문제의 제이쿼리

 12개의 공개문제 중에서 제일 서로 다르게 생긴 와이어 프레임을 4개를 뽑았다. 시간없으니까 네개만이라도 먼저 해보자는 생각으로..

다행스럽게도 이미지 슬라이드랑 gnb(글로벌네비게이션)만 하면 된다는 것이라고 위안을 한다. (1도 모르면서 ^^;)


< 내일부터 하루에 1시간씩 만들어볼 예제 List >


프레임예제 1)



프레임예제 2)




프레임예제 3)



프레임예제 4)

잘 할 수 있을까?









728x90