클라이언트/ 서버/ 엔지니어 "게임 개발자"를 향한 매일의 공부일지

이미지 슬라이드를 구현하는 실습을 진행해 보겠다.    이론 4 - 이미지 슬라이드 2  이번에는 하단 사진 메뉴의 이미지를 클릭했을 때 넘어가도록 만들어볼 것이다.          퀴즈 4 - 이미지 슬라이드 2     다시 한번 내용을 참고하면서 풀어보기로 하자.         프로젝트 4 - 이미지 슬라이드 기능 구현하기 2    문제 풀기 1. 작성된 코드 실행해 보기현재 오른쪽 버튼은 구현이 되어 있으므로 이 내용을 한번 확인한 후, 왼쪽 버튼을 구현하기로 하자.      이렇게 사진이 이동한다.    2. 관련 부분의 html 코드 살펴보기 slide 이 부분으로 이런 구조로 되어 있다. 이제 자바스크립트 코드로 살펴보자.   3. 오른쪽 슬라이드 버튼 기능 참고하며 왼쪽 슬라이드 버튼 기능 ..

이어서 탭 버튼을 구현하는 실습을 진행해 보겠다.    이론 4 - 탭 버튼 구현    노드 리스트는 해당 요소가 배열로 들어있는 것을 말한다.    퀴즈 3 - 탭 버튼 기능    대략 이게 답일 것 같았다.     프로젝트 3 - 탭 버튼 기능 구현하기     지금 현재는 탭을 눌러도 반응이 없지만 이것을 클릭했을 때 해당 내용이 표시되도록 만들 것이다.  문제 풀기 1. 작성할 코드 HTML 파일에서 살펴보기탭이 있는 이 부분을 js 코드로 작성해 볼 것이다.    2. a 태그 기능 끄고 href 속성값으로 연결하도록 코드 작성하기탭으로 지정한 태그를 괄호 안에 써보고, 태그의 기능을 정지시키기 위해 preventDefault를 사용한다. 그리고 quarySelector에 있는 탭 id를 가져온..

이제 이미지 슬라이드 기능을 구현해 보겠다.    이론 3 - 이미지 슬라이드 1 이미지가 3초 간격으로 넘어가도록 만들어보는 실습을 진행해 본다.           퀴즈 2 - 이미지 슬라이드 1    이 문제는 틀렸다. 조금 어려운 문제 같다.           프로젝트 2 - 이미지 슬라이드 기능 구현하기 1  JS 파일    1. 문제 살펴보기슬라이스 기능이 있는 코드를 살펴보자. 이 부분을 선택해서 이미지가 크기만큼 왼쪽으로 이동하는 애니메이션을 구현할 것이다.    2. 애니메이션 이동 기능 구현하는 코드 작성하기 현재 슬라이드를 보여주는데 0번부터 설정하도록 저장했다. from과 to는 현재 위치에서 어디로 이동할지 알려주는 변수이다. 이미지가 계속 왼쪽으로 가야 하므로 -로 설정했다.이미지..

자바스크립트 기초 4주차 공부를 시작해보려고 한다. 오늘 새벽에 4주차 과정을 모두 마치고 시간이 남으면 어제 공부하다 말았던 넷째날 수업을 들어보려고 한다.아마 제이쿼리 수업 진도일 것이다. 먼저 지금까지 배운 내용을 바탕으로 사이트를 제작하는 실습을 진행해보겠다.    이론 1 - 제작 사이트 소개          이러한 사이트를 제작하게 된다.    이론 2 - 내비게이션 기능       preventDefault는 이벤트 헨들러이다.     퀴즈 1 - 내비게이션 기능    조금 헤깔렸지만 잘 풀었다.     프로젝트 1 - 내비게이션 기능      HTML 파일     CSS 파일    JS 파일 각각의 파일에는 정말 많은 내용이 들어있는데 코드가 너무 길어서 일부만 가져왔다.    문제 풀기 ..