jquery 누구나 할 수 있다!
시작하기 전에 앞서..
이 글을 작성하면서 많은 반성을 했습니다.
왜? why? (와이파이~)
난 그동안 너무 노력없이 살아왔구나…
가장 많이 접하고 사용하는 퍼블리셔라면서 jquery에 대한 무지함이 너무 부끄러워 쥐구멍이라도 숨고싶은 심정이였습니다.
물론 jquery보단 javascript를 먼저 배워야 한다. 라는 말도 많습니다. 하지만 웹을 제작하면서 화면단에서 보여지는 인터렉션에 대한 사용은 jquery가 사용하기도 훨씬 쉽고 접근하기도 가장 편합니다.
그럼 이제 jquery를 입문하여 봅시다. (물론, 기본적인 html,css에 대한 이해가 필수)
위 사이트에 접속 하면
이런 화면이 보여집니다.
PLAY NOW FOR FREE 라고 쓰여있는 녹색 버튼을 살포시 눌러줍니다.
그럼 Introduction to jquery,
말그대로 jquery 소개입니다.
자, START LEVEL 1 버튼을 눌러볼까요?
버튼을 누르면 위처럼 하나의 동영상이 시작됩니다.
신나는(?) 노래와 함께 애니메이션이 재생되고 그 후에 미국에 사는 엄청 재수없고 , 공부 잘하고, 왕따지만, 천재인 것 같은 외모의 남자가(주커버그가 회색티면 난 회색 남방이다! 라고 외칠듯한..?ㅋㅋ) jquery에 대한 설명과 뭐 유료회원으로 결제를 하면 어쩌구저쩌구 합니다.
쿨하게 CONTINUE 버튼을 눌러줍시다.
자 , 이제부터 jquery 기초 셀렉터 부터 배우는 시간입니다.
일단 코드를 쉽게 보기 위해
빨간 박스로 표시해논 버튼을 클릭해 줍니다.
그럼, 요렇게 HTML과 Slides, hints로 나뉘어 지게 되는데요?
- HTML : 말그대로 HTML
- Slides : jquery 기본 에 대한 설명 pdf파일을 보여줍니다. 빨간 박스부분을 클 릭하면 압축 파일로 다운도 되죠. 참 쉽죠?
- Hints : 말그대로 Hint 뭘 해야 되는지 모르겠다. 하시면 눌러보세요.
상단에 있는 설명대로 저 h2 엘리먼트를 선택해 봅시다.
하단에 console이라는 부분에 jquery를 입력하면 상단부분에 녹색 박스로 맞다고 하면서 줄이 쳐집니다.
하지만 h2를 선택하지 않고 p를 선택했다면??
빨간 줄이 쳐지게 됩니다.
그럼 현재 html문서내에 없는 h3를 선택하거나 틀린답이라면?
이렇게 하단에 빨간 글씨로 114상담원 보다 친절하게
넌 틀린 엘리먼트를 선택했어, 기억해봐 니가 원하는 셀렉트는 h2야
라고 가르쳐 줍니다. (제 인생도 이렇게 틀리면 누가 알려줬으면…ㅠㅠ)
자 눈물을 훔치고 다시 제대로 된 h2를 입력하고 엔터를 쳐볼까요?
녹색 글씨로 성공했다며 축하해주네요~
자, 이제 jquery의 첫 걸음마를 뗀 순간입니다.
우리의 부모님이 우리들의 첫 걸음마를 보고 감동의 눈물을 흘리며 기뻐하던 모습을 떠올리며 박수를 칩시다.(짝짝짝짝)
좌측 하단에는 비행기 모양 아래 구름위에 total points가 있는데요 문제를 맞히며 넘어갈 수록 포인트가 쌓입니다.
그 포인트로 뭘 할 수 있는지는 비밀~(모른다고 말 못함…)
이렇게 쭉 설명해주는대로 따라가다보면 어느샌가 끝에 와있겠죠?
다 끝나면 젤 하단에 learn more 이라는 곳을 클릭하면 CONTINUE LEARNING 녹색버튼이 보이는데 jquery를 더 배울 수 있는 심화 과정인것 같습니다.
들어가보면
자 다시 시작입니다. 공부는 끝이 없죠?^^
제가 이 사이트를 소개해드린 이유는?
책이나 인터넷에 나온 글들이 훨씬 자세하게 나와있습니다.
하지만 전 공부를 할때 재미를 붙이는 것이 가장 큰 효과를 본다고 생각합니다. 마치 나는 비행기다. 챕터라는 각 나라를 차례차례 여행을 다니면서 지식과 경험을 쌓는다. 라고 비유를 해논것같아 재미를 붙이기에는 손색이 없는 사이트라 추천드립니다.
이 코드스쿨이라는 사이트에는 jquery 말고도 많은 과정들을 무료로 재밌게 공부할 수 있도록 만들어 놓았습니다.
시간 나실때 이곳에 html, css 과정도 있으니 한번 보시고 쉽게 웹페이지를 만드는 그날까지 응원하겠습니다!
