전세계 웹사이트에서 75%이상이 사용하고 있는 javascript 라이브러리 jQuery ! 화려한 효과보다는 원리를 이해하며 기본기를 다질수 있도록 구성했습니다. 제이쿼리 기초부터 활용까지 학습하여 여러분만의 포트폴리오를 완성하거나, 현업에서 바로 활용해보세요.
아직도 살아 있는 불사의 jQuery - 기초 부터 실무까지 강의 | 이지웹 - 인프런
이지웹 | , jQeury를 아직도 학습해야 하는 이유jQuery는 2006년 처음 등장한 이후, 웹 개발자들에게 널리 사용되어 온 자바스크립트 라이브러리입니다. 그 주요한 이유 중 하나는 다양한 웹 브라우저
www.inflearn.com
이런 걸 배울 수 있어요
- jQuery 기초 문법
- jQuery로 요소의 스타일 변경하기
- jQuery로 요소에 이벤트 적용하기
- jQuery로 애니메이션 빠르게 구현하기
- 바로 써먹을 수 있는 실전 예제 탭스(tabs)
- 바로 써먹을 수 있는 실전 예제 아코디언(accordion)
- 바로 써먹을 수 있는 실전 예제 라이트박스(lightbox)
- 바로 써먹을 수 있는 실전 예제 백투탑(back to top) 애니메이션
- 바로 써먹을 수 있는 실전 예제 슬라이드(slideshow)
- 실무 라이브러리 - Swiper JS 활용하기
- 실무 라이브러리 - Masonry 활용하기
- 실무 라이브러리 - ScrollTrigger 활용하기
- 실무 라이브러리 - Fullpage JS 활용하기
jQeury를 아직도 학습해야 하는 이유
jQuery는 2006년 처음 등장한 이후, 웹 개발자들에게 널리 사용되어 온 자바스크립트 라이브러리입니다. 그 주요한 이유 중 하나는 다양한 웹 브라우저 간의 호환성을 보장하면서도 HTML 요소의 선택과 조작을 단순화하여 개발 생산성을 높여주기 때문입니다.
jQuery의 이러한 장점은 전 세계 웹사이트에서의 높은 사용률로 나타납니다. 예를 들어, 2021년 기준으로 상위 1,000만 개 웹사이트 중 약 77.8%가 jQuery를 사용하고 있었습니다.
[ 출처: https://w3techs.com/technologies/overview/javascript_library ]
이처럼 jQuery는 오랜 기간 동안 웹 개발의 표준 도구로 자리매김해 왔습니다. 따라서, jQuery를 학습하면 기존의 방대한 코드베이스를 이해하고 유지보수하는 데 큰 도움이 됩니다. 또한, 여전히 많은 웹사이트가 jQuery를 사용하고 있으므로, 이를 숙지하면 다양한 프로젝트에서 유용하게 활용할 수 있습니다.
물론, 최근에는 React나 Vue.js와 같은 최신 프레임워크와 라이브러리가 주목받고 있지만, jQuery의 단순함과 광범위한 호환성은 여전히 매력적인 요소로 남아 있습니다. 따라서, 웹 개발자로서 jQuery를 학습하는 것은 과거와 현재의 기술을 모두 이해하는 데 있어 중요한 밑거름이 될 것입니다.
jQuery 활용 웹사이트 예시
삼성전자 https://www.samsung.com/sec/
삼성전자 홈에서 개발자 도구로 element 부분의 head 태그 부분을 보면 jQuery 라이브러리, slick(슬라이드쇼) 라이브러리, swiper 라이브러리, masonry 라이브러리를 활용하고 있습니다.
아시아나 항공 - https://flyasiana.com/C/KR/KO/index
아시아나 항공의 경우 jquery, swiper 라이브러리를 활용하고 있고, 날짜를 많이 활용하기 때문에 moment.js를 활용하고 있습니다.
빙그레 - https://www.bing.co.kr/
빙그레 사이트의 경우 masonry, slick등을 활용하고 있고, 공통적으로 적용될 스크립트는 common.js, 각 페이지 별로 작동할 스크립트는 main, sub 등으로 구분하여 사용하고 있습니다.
그 외에 다수의 사이트들이 jQeury를 활용하여 웹사이트를 제작, 유지 보수 하고 있습니다.
그래서 본 강의에서도 jQeury의 기본 문법과 대표적인 함수들, 탭스, 아코디언등 기본 예제를 학습하고, 대표적인 실무 라이브러리인 swiper js, masonry, fullpage JS 등을 추가로 학습할 예정입니다.
주요 학습 내용을 소개합니다.
파트 A
jQuery 기본 문법을 학습합니다.
jQuery 로드 부터, 로드 순서를 학습합니다. jQuery를 활용하여 요소를 선택하고, 선택한 요소에 스타일을 변경하고, 선택한 요소에 이벤트를 적용합니다.
jQuery를 통해 애니메이션을 쉽게 구현합니다. 이때 애니메이션의 시간, 속도 및 함수를 작성하여 세밀하게 설정합니다.
jquery 이벤트를 학습하는 소스의 일부입니다.
이벤트와 애니메이션 기초를 학습하는 예제입니다.
파트 B
파트 B에서는 웹페이지 제작시 가장 많이 활용되는 UI/UX인 탭, 아코디언, 라이트박스, 백 투 탑, 슬라이드를 구현합니다. 효과 구현을 위한 html 구조를 작성하고, css로 미리 효과를 설계하고, script를 구현하여 다양한 이벤트에 따라 효과가 구현되도록 작성합니다.
탭 완성본 화면입니다.
아코디언 완성본입니다.
라이트박스 완성본입니다.
Bact to Top Animation 완성본입니다.
slideshow 완성본입니다.
파트 C
파트 C에서는 실무에서 많이 활용되는 라이브러리중 Swiper, Masonry, ScrollTrigger등의 활용법을 학습니다.
Swiper JS 라이브러리 완성본입니다.
Masonry 라이브러리 완성본입니다.
ScrollTrigger 라이브러리 완성본입니다.
파트 D
파트 B에서는 fullpageJS를 활용하여 휠을 움직이면 다음 슬라이드로 부드럽게 이동하는 웹페이지를 구현합니다.
SVG로 그래프를 작성하고, jQuery와 연동하여 테두리가 채워지는 애니메이션을 작성합니다.
fullpage JS 활용 프로필 페이지 완성본입니다.
예제 파일 및 완료본을 제공합니다.
예제 파일은 2차시(jQuery 문법 - 로드 순서)의 자료에서 다운로드 할 수 있습니다.
완성본 전체 파일은 17차시(Fullpage JS)의 자료에서 다운로드 할 수 있습니다.
이런 분들께
추천드려요!
- HTML, CSS, Javascript를 학습한 분
- 퍼블리셔를 준비하고 있는 취준생
- 포트폴리오를 준비하고 있는 분
- 웹디자인 개발 기능사(구, 웹디자인 기능사) 자격증을 준비하는 분
아직도 살아 있는 불사의 jQuery - 기초 부터 실무까지 강의 | 이지웹 - 인프런
이지웹 | , jQeury를 아직도 학습해야 하는 이유jQuery는 2006년 처음 등장한 이후, 웹 개발자들에게 널리 사용되어 온 자바스크립트 라이브러리입니다. 그 주요한 이유 중 하나는 다양한 웹 브라우저
www.inflearn.com
'인프런 강의' 카테고리의 다른 글
| 모바일 웹 제작 입문: Figma 디자인 완벽 구현하기 with Javascript (0) | 2025.02.10 |
|---|---|
| Figma 참조 - 반응형 쇼핑몰 웹사이트 만들기 완벽 가이드 (0) | 2025.01.13 |
| 웹프로그래밍의 꽃! 자바스크립트 기초 인프런 강의가 오픈되었습니다. (1) | 2024.12.20 |
