Deplux4편 - jQuery를 이용해 동작 추가하기
드디어 마지막으로 동작을 추가하면 예제가 전부 완성입니다.
js도 CSS와 같이 사전 작업이 필요하니 사전 작업 먼저 진행하겠습니다.
이렇게 jquery 파일과 우리가 작성할 script 파일 두개를 index.html 하단의 </body> 바로 위에 넣어줘야 합니다.
주의할 점은 코드는 위에서부터 읽어 내려오기 때문에 jquery를 먼저 넣어줘야
추후 script.js 에서 jquery 코드를 작성해도 문제가 생기지 않습니다.
<script src="jquery.js"></script> <script src="script.js"></script> </body>
html과 js를 연결해줬으면 이제 script.js에서 실제 코드를 작성하겠습니다.
$(document).ready(function() { 여기에 실행할 코드를 입력합니다.}
html 문서가 읽힌 후 { } 안의 코드를 실행하는 명령어입니다.
$('.menu-sub').stop().slideUp(0);
기본값으로 menu-sub 클래스의 요소를 접어두기 위해 작성하는 코드입니다.
$('.menu').hover( function() { $('.menu-sub').stop().slideDown(300); }, function() { $('.menu-sub').stop().slideUp(300); } );
.hover(함수1, 함수2); 문법을 통해서
menu 클래스에 마우스가 들어올 때 함수1, 마우스가 나갈 때 함수 2를 실행하도록 만들어 줍니다.
마우스가 들어왔을 때 서브 메뉴를 아래로 슬라이드 해서 열어주고,
마우스가 영역을 나갔을 때 서브메뉴를 위로 슬라이드해서 다시 사라지게 만들어 줍니다.
이때 .stop() 은 기존에 진행중이던 애니메이션을 중지시켜주는 역할을 하며, 버그 방지를 위해 필요합니다.
slideUp(숫자),slideDown(숫자) 는 각각 숫자만큼의 시간동안 애니메이션을 실행하는 역할을 하며
밀리초 단위를 사용해 slideUp(300)의 경우에는 0.3초동안 슬라이드를 올리는 결과가 도출됩니다.
setInterval(function() { $('.slide-wrap').animate({ top: '-300px' }, 600, function() { $('.slide-wrap a:first').appendTo('.slide-wrap'); $('.slide-wrap').css('top', '0'); }); }, 3000);
setinterval ( 함수 , 시간 ) 은 뒤에 적힌 시간마다 함수를 실행하는 역할을 하는 문법입니다.
시험 문제에서 3초마다 이미지를 슬라이드 할 수 있도록 요구하고 있으니 3000 밀리초를 적어서 3초마다 반복되게 만듭니다.
.animate( 애니메이션, 시간, 함수 ); 는 설정 시간동안 애니메이션을 실행하는 역할을 하는 문법입니다.
뒤에 적힌 함수는 콜백 함수라고 불리며, 애니메이션이 끝난 직후에 실행될 동작을 넣어주는 곳입니다.
현재 우리가 한 html 구성을 보면 slide-wrap 안에 이미지를 세로로 3개 쌓아둔 형태입니다.
그러므로 { top: '-300px' } 을 통해 통채로 300픽셀만큼 위로 올려주면 다음 이미지로 슬라이드되는 효과가 구현됩니다.
0.6초동안 이미지를 위로 밀어 올린 이후에는 콜백 함수를 통해 위로 올라간 이전의 이미지를
slide-wrap 맨 밑으로 옮겨주는 작업을 진행합니다.
.slide-wrap a:first 를 통해 첫번째에 있는 a 태그를 선택하고, .appendTo() 를 이용해서
.slide-wrap 하단에 잘라 붙여넣어 줍니다.
그리고 다음 슬라이드를 위해서 위로 끌어올렸던 top을 다시 0으로 만들어주는 작업이 필요합니다.
이때, 이미 바로 위의 작업으로 인해 제일 앞 이미지가 다음 이미지로 변경되었기 때문에,
높이를 초기화해도 바뀐 이미지로 그대로 유지됩니다.
$('.tab button').click(function() { $(this).parent().addClass('active').siblings().removeClass('active'); });
.tab 요소 안의 버튼을 클릭하면 함수를 실행하는 역할입니다.
$(this) 는 클릭한 요소를 선택고, parent() 는 부모 요소를 ,
여기서는 버튼을 감싸는 tab-notice 또는 tab-gallery를 선택하게 됩니다.
addClass('active') 로 선택한 부모 요소에 active 클래스를 추가해 주면, css에서 작성한 바와 같이
해당하는 탭 영역을 display:flex 로 만들어 주어 보여주는 역할을 합니다.
그리고 siblings() 은 선택된 요소의 형제 요소, 풀이하자면 같은 부모 요소로 감싸진 다른 요소를 선택합니다.
여기서는 tab 안에 tab-notice와 tab-gallery가 들어와 있는 형태이고, parent() 를 이용해 둘 중 하나가 선택되어 있는 상태이므로
siblings() 를 이용해 선택하지 않은 다른 탭 요소를 선택해줍니다.
그리고 addClass() 와 반대로 클래스를 제거해주는 역할을 하는 removeClass() 를 통해서 기존에 있던 active 태그를 제거하면 선택된 탭은 보이고, 선택되지 않은 탭은 사라지는 효과가 완성됩니다.
$('.tab-notice-contents li:first-child').click(function(e) { $('.pop-up').css('display', 'flex'); });
다음으로 구현할 것은 공지사항 첫번째 콘텐츠를 클릭하면 팝업창을 띄우는 기능입니다.
$('.tab-notice-contents li:first-child') 를 통해 공지사항의 첫번째 컨텐츠를 선택하고,
click() 을 통해 컨텐츠가 클릭되면 함수를 실행합니다.
함수에서는 기존에 CSS에서 display:none; 으로 숨겨놨던 pop-up 의 display를 flex로 바꿔 화면에 보이도록 만들어 줍니다.
$('.pop-up button').click(function() { $('.pop-up').css('display','none'); }); });
위와 반대로 이번엔 팝업창의 버튼을 클릭하면 팝업을 사라지게 만드는 역할입니다.
flex 로 만들어 줬던 display를 다시 none 으로 바꾸어 창을 닫는 효과를 구현할 수 있습니다.
이렇게 기능 구현까지 완료 되었으며, 여기까지 따라오셨으면 실제 실기에서 하는 문제를 완전히 풀이하셨습니다.
이제 다음 강좌부터는 기능사 실기 예제로 올라와 있는 예제들을 랜덤으로 뽑아 실제 시험에서 하듯이
쭉 작성해 보는 강좌를 작성할 예정입니다.
사실 실제 시험에서는 대부분의 학생들이 코드를 간결하게 정리하고,
가장 효율적인 코드로 정리하는 작업 등은 불가능하다고 생각합니다.
그래서 그냥 위에서부터 쭉 작성해 내려가면서 실제 시험처럼 만들어 보도록 하겠습니다.
각 예제 코드들은 강좌에 포함된 링크를 통해 영상으로 남겨놓을 테니 보시면서 흐름을 따라 만들어 보시는 것을 추천합니다.
강좌에는 영상에서 작성한 코드들에 주석으로 피드백을 작성해서 코드로 올려놓도록 하겠습니다.