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

이번에는 제이쿼리 단원을 마무리하며 미션 문제를 풀려고 한다. 사실 이 문제는 지난 4주차에 풀었던 미션 문제인데 제이쿼리로 바꿔서 문제를 풀도록 되어 있다. 오늘 새벽에 얼마나 잘 공부했는지 점검도 할 겸 문제를 풀어볼 것이다.여기까지 하고 새벽 공부를 마무리하려고 한다. 이것까지 하면 어젯밤 9시 반부터 거의 쉬지 않고 9시간 반을 연달아 공부하는 셈이 된다.    미션 1 - 상자의 크기와 위치 변경하기   jQuery API 소개 jQuery API DocumentationjQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, ev..

이제 제이쿼리 마지막 이론과 실습 공부가 될 것 같다. 마지막 시간까지 힘을 내서 공부에 임해보겠다.   실습 6 - 제이쿼리 이벤트 : Class 이벤트  클래스를 추가, 제거하는 것과 특정 클래스가 존재하는 확인하는 기능이다.    문제 풀기    1. html과 css 파일 확인하고 실행하기   아직은 아무것도 동작하지 않는다.    css에는 이러한 코드가 작성되어 있다. addClass 버튼을 클릭했을 때 h1, h2이 각각 만들어지도록 하는 코드를 작성해 볼 것이다. removeClass는 그 반대의 기능을 한다. hasClass를 사용해서 blue와 important 클래스가 있는지 판단하고 만약 클래스가 있다면 빼주는 기능을 만들 것이다.   2. 클래스를 추가하는 기능 만들기클래스가 추가..

이어서 제이쿼리의 이벤트에 대해서 공부해 보겠다. 오늘 새벽까지 5주차 제이쿼리 공부를 모두 마친 후에 오늘 이른 새벽에 만들었던 웹사이트 구현 기능을 제이쿼리로도 만드는 실습을 진행해보려고 한다.난 새벽에 가장 공부가 잘 되고 머리가 맑으니 이 시간에 중요한 공부를 하는 편이다. 아마 하루 공부해야 할 분량의 절반을 새벽에 하는 것 같다.     실습 4 - 제이쿼리 이벤트 : Hide, Show, Toggle 이벤트  마우스 상태를 나타내는 3가지 이벤트에 대한 실습을 이어서 진행해보겠다.   1. html 파일 열어서 실행해 보기이 파일에 버튼을 추가해 주었다.   hide를 클릭하면 문자가 사라지고, show는 나타나게 한다. toggle은 hide와 show의 기능을 모두 담고 있다.    2...

이번에는 제이쿼리 선택자와 이벤트에 대해서 공부해보려고 한다.    실습 2 - 제이쿼리 선택자  제이쿼리와 CSS와 다른 점은 $ 기호를 사용한다는 것이다.       문제 풀기 1. html 파일 살펴보기id와 class 선택자가 이미 작성되어 있는 상태이다.  버전은 내가 갖고 있는 상위 버전으로 고쳐주었다. 이제 js 파일로 가서 코드를 작성해 보겠다.    2. js 파일에서 코드 작성하기제이쿼리의 css 메서드를 활용해서 태그명, 아이디 속성값, 클래스 속성값으로 해당 코드를 작성한다.  제이쿼리 버전을 상위로 했더니 색깔이 하나도 적용이 되지 않아서 3.3.1로 변경했다. 이 프로젝트에는 지난번 실습과 버전이 달랐다.  색깔이 잘 적용되었다. 3가지 방식을 통해 html 문서에 접근할 수 있..

여기서부터는 부록으로 제공되는 과정으로 해도 되고 안 해도 되는 학습인 것 같다. 그래도 난 제이쿼리를 꼭 배우고 싶으니 이 단원을 공부해보려고 한다.강의는 없이 실습만 있지만 실습 영상을 시청하며 따라서 학습해보겠다.    이론 1 - 제이쿼리 소개    제이쿼리는 언어가 아니라 자바스크립트 언어로 구성된 라이브러리이다. 이것을 사용하면 코드가 간결해진다.          원래 코드 분량이 길지만 제이쿼리로 작성할 때는 이렇게 간단해진다.           제이쿼리 공식 웹사이트에 접속해서 관련된 파일을 다운로드 받아야 사용할 수 있다.    실습 1 -- 제이쿼리 적용하기    1. 제이쿼리 홈페이지 접속하기 제이쿼리 공식 홈페이지 jQueryWhat is jQuery? jQuery is a fast..

이미지 슬라이드를 구현하는 실습을 진행해 보겠다.    이론 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 파일 각각의 파일에는 정말 많은 내용이 들어있는데 코드가 너무 길어서 일부만 가져왔다.    문제 풀기 ..

단원 마무리를 하며 연습 문제를 풀어보려고 한다.    단원 마무리하기           마무리 연습문제 풀기 문제 1번        문제 풀기  실행 흐름HTML 문서가 로드되면, 모든 class="check" 요소에 클릭 이벤트 리스너가 추가됨사용자가 각 체크박스를 클릭하면클릭된 체크박스와 해당 텍스트가 회색(#ccc)으로 변경됨텍스트에 취소선(line-through)이 표시됨효과적으로 "할 일 완료" 상태를 시각적으로 표시  체크박스를 클릭하면 이처럼 취소선이 그어지고 색깔이 연해진다.    문제 2번     문제 풀기 1. 스타일 요소 추가하기   2. 테이블 만들기  문제에서 여기까지는 주어졌어야 하는데 코드를 작성할 때 이 부분을 빠뜨린 것 같다.   3. 여러 행과 열 추가하기 실행 흐름사용..