웹디자인기능사 실기 jQury 코드 기록 - 1주일 독학 합격!

유튜브만 봐도 웹디자인기능사 실기를 위한 수많은 강의들이 있다.

 

난이도가 높지 않은 시험이니 대충 유명한 강의로 한 강의만 파면 충분할 줄 알았는데 다 어딘가 2%부족한..? 느낌이라 여러 강의를 보고 마음에 드는 부분만 조합해서 공부하게 되었다.

 

 

특히 이미지 슬라이드가 채점 기준과 너무 동떨어진 제멋대로인 게 많아서 골치가 아팠었다. 

 

 

html과 css는 굳이 암기하지 않아도 시험장에서 임기응변이 가능하기 때문에 큐넷 공개문제에 있는 모든 경우의 수를 반복해서 만들며 공부했고, 노베이스였던 js는 이해하려 노력(?)했지만 결국 암기해서 1주일만에 합격했다!

 

 

하지만 합격하고 신나는 마음에 피땀흘려 조합하고 반복한 연습 파일을 다 날려버렸다.....내가 미쳤지....🤯

남아있는 것은 마지막 날 최종 암기하려고 캡쳐해둔 js코드 뿐..!

아쉽지만 이거라도 리뷰해보려고 한다.

 

html css파일은 다 날렸고 다시 만들 시간이 없으나ㅠㅠ class, id명이 직관적이라 공부 좀 해보셨다면 다른 곳에서 작성한 html 코드에도 충분히 적용할 수 있을 것 같다.

 

---

0. 시작하기 전에 

미리 제공되는 제이쿼리파일을 html에 잘 링크 시킨뒤,

새로 script.js 파일을 만들어서 

jQuery(document).ready(function(){

//내용

});

이렇게 적어준 뒤 이 안에다 아래에 설명할 코드들을 넣어주어야 한다.

대충 제이쿼리로 된 함수를 실행하겠다는 뜻이다.

 

---

1. 카테고리메뉴 슬라이드

 

• 마우스오버 된 카테고리의 하위 카테고리만 나타나는 유형

//분리형 메뉴
  $(.navi > li).hover(function(){ //.navi 안의 li에 마우스를 올렸을 때 작동
    $(this).find('.submenu').stop().slideToggle(500); //마우스가 올라간 그 리스트를 찾아서 0.5초동안 슬라이드
  });

.stop()이 뭔지 모르겠다면 stop를 뺀 채로 저장한 뒤 카테고리 위에서 마우스를 빠르게 움직여보자.

있을때와 없을 때 차이를 바로 알 수 있다!

 

• 카테고리의 하위 카테고리 전체가 다 나타나는 유형

 //일체형 메뉴
   $(.navi > li).hover(function(){ //.navi 안의 li에 마우스를 올렸을 때 작동
    $(.submenu).stop().slideToggle(500); //서브메뉴를 0.5초동안 슬라이드
  });

 

---

2. 이미지 슬라이드

슬라이드가 "1-2-3-(휘리릭321)-1-2-3" 이런 형식으로 앞으로 빠르게 돌아갔다가 반복되는 코드는 감점 요소이고 감독관이 이러면 안된다고 한다거나 그런 후기들이 정말 많았다. 근데 유튜브에서는 왜 다 저런식으로 알려주는건지 모를..ㅠ

아무튼 아래 슬라이드 코드는 1-2-3-1-2-3... 정상적으로 작동하는 코드이다!

• 페이드인-아웃 되는 슬라이드

 //이미지슬라이드 페이드인-아웃
  $(".imgslide a:gt(0)").hide();            //.imgslide의 첫번째보다 큰a를 숨긴다
  setInterval(function(){                   //반복한다
    $(".imgslide a:first-child").fadeOut()  //.imgslide의 첫번째 a를 fadeout한다
    .next("a").fadeIn()                     //다음번째 a를 fadein시키고
    .end().appendTo(".imgslide");           //그 a를 .imgslide의 마지막에 붙인다 
  },3000);				//3초마다 함수호출

 

 

• 상하 or 좌우 슬라이드

//상하, 좌우슬라이드
  $setInterval(function(){                       	//반복한다
    $(".slidewrap").animate({                   	//slidewrap 애니메이션
      left: "-1200px"                           	//왼쪽으로 -1200px
    },function(){								
      $(".slidebox").eq(0).appendTo(".slidewrap");	//slidebox의 첫번째요소를 slidewrap에 추가
      $(".slidewrap").css({				//slidewrap의 css
        left: 0;					//left를 0으로 변경	
      });
    });
  },3000);						//3초마다 함수 호출

상하슬라이드는 left대신에 top: "-배너높이px"와 top: 0;으로만 수정해주면 된다.

---

3. 탭메뉴

//탭메뉴
  $(".notice > li > a").click(function(){          //notice의 li의 a를 클릭했을 때 작동
    $(this).parent().addClass("active").siblings().removeClass(".acctive"); 
    return false; ////이것의 부모요소에 active 클래스 추가, 나(부모요소)를 제외한 형제요소에서 active 클래스 제거
  });

return false은 이벤트 버블링을 막기위함이라고 하는데, 이해가 잘 안 간다...나중에 추가하겠음

---

4. 모달팝업

$(".notice li:first").click(function(){ notice  //notice의 첫번째 li를 클릭했을 때 작동
    $("#modal").addClass("active");   			//modal에 active클래스 추가
  });
  $(".btn").click(function(){					//btn을 클릭했을 때 작동
    $("#modal").removeClass("active");			//modal에 active 클래스 제거
  });

 

---

한 파일에 들어있는 코드까지 남겨두고 마치도록 합니다..

 

See the Pen Untitled by sott120 (@sott120) on CodePen.