전세계 웹사이트에서 75%이상이 사용하고 있는 javascript 라이브러리 jQuery ! 화려한 효과보다는 원리를 이해하며 기본기를 다질수 있도록 구성했습니다. 제이쿼리 기초부터 활용까지 학습하여 여러분만의 포트폴리오를 완성하거나, 현업에서 바로 활용해보세요.

 

https://inf.run/ehphw

 

아직도 살아 있는 불사의 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를 학습한 분
  • 퍼블리셔를 준비하고 있는 취준생
  • 포트폴리오를 준비하고 있는 분
  • 웹디자인 개발 기능사(구, 웹디자인 기능사) 자격증을 준비하는 분

https://inf.run/ehphw

 

아직도 살아 있는 불사의 jQuery - 기초 부터 실무까지 강의 | 이지웹 - 인프런

이지웹 | , jQeury를 아직도 학습해야 하는 이유jQuery는 2006년 처음 등장한 이후, 웹 개발자들에게 널리 사용되어 온 자바스크립트 라이브러리입니다. 그 주요한 이유 중 하나는 다양한 웹 브라우저

www.inflearn.com

 

반응형

인프런 강의 소개드립니다.

 

웹 개발의 첫 걸음을 떼셨나요? HTML, CSS, javascript를 이제 막 시작하신 분들께 특별한 제안을 드립니다! 모바일 시대에 발맞춰 모바일 웹사이트를 만들고 싶지만, 어디서부터 시작해야 할지 망설여지시나요? 걱정하지 마세요. Figma 모바일 디자인을 직접 분석하고 구현하면서, 자연스럽게 반응형 웹 개발의 핵심을 배워보세요. 세련된 모바일 디자인을 토대로, 사용자의 마음을 사로잡는 섬세한 인터랙션부터 다양한 화면 크기에 완벽하게 적응하는 기술까지, 모든 것을 함께 알아가볼 수 있습니다. 이제 여러분의 웹사이트가 모든 기기에서 빛나도록, 노하우를 나눠드리겠습니다. 함께 시작해볼까요?

 

https://inf.run/5vx9u

 

모바일 웹 제작 입문: Figma 디자인 완벽 구현하기 with Javascript 강의 | 이지웹 - 인프런

이지웹 | , Figma 디자인을 참조하여 HTML/CSS, Javascript를 활용하여 모바일 웹사이트를 구현합니다. 모바일 디자인을 분석하여 유지관리가 용이한 웹사이트를 구현해보세요.본 과정은 HTML, CSS, Javascri

www.inflearn.com


초급자를 위해 준비한
[프론트엔드, 웹 퍼블리싱] 강의입니다.

이런 걸 배워요!

  • Figma 디자인 해석과 이미지 추출하기
  • HTML/CSS 파일 초기 세팅하기
  • CSS 변수 및 글로벌 스타일 작성하기
  • 웹폰트 사용 설정하기
  • 레이아웃 설계: Grid와 Flexbox 활용하기
  • 적응형 CSS 구현하기
  • Swiper.js를 활용한 메인 슬라이드 제작하기
  • Javascript 활용 Aside 메뉴 네비게이션
  • Javascript 활용 상품 개수 수정
  • Javascript 활용 그리드 뷰 변경하기

Figma 디자인을 참조하여 HTML/CSS, Javascript를 활용하여 모바일 웹사이트를 구현합니다. 모바일 디자인을 분석하여 유지관리가 용이한 웹사이트를 구현해보세요.

본 과정은 HTML, CSS, Javascript 기초가 있으면 좀더 원할하게 학습하실 수 있습니다.

각 파트별 학습은 아래 링크를 확인해주세요.

 

웹프로그래밍의 꽃! 자바스크립트 기초 강의 | 이지웹 - 인프런

이지웹 | , 본 과정은 화려하고 복잡한 기능보다 프로그래밍의 기본과 핵심 개념에 집중해 탄탄한 기초를 다질 수 있도록 구성되었습니다.변수와 연산자, 함수와 객체, 배열의 생성과 활용 등 기

www.inflearn.com

본 강의는 취업용 포트폴리오 제작을 컨셉으로 하고 있습니다.

본 과정은 모바일 전용 웹사이트를 만드는 과정을 소개합니다.

완성된 웹페이지를 PC로 접속했을 때는 모바일 목업 안에 페이지를 가두어 보여줍니다. 이때 javacript를 이용하여 접속한 기기가 모바일 기기인지 파악합니다.

.

실무에서는 이렇게 모바일 목업을 만들지 않고 화면 전체를 활용하거나, 반응형으로 구현합니다. 반응형 웹페이지 구현이 궁금하면 https://inf.run/CZ1az 강의를 참조해주세요.

접속한 기기가 모바일 이라면 목업은 사라지고 컨텐츠만 해당 기기에 맞춰 최적화하여 보여주는 적응형 모바일 웹사이트 구현 방법을 소개합니다.

완성본의 파일 구조입니다.

PC로 접속하면 루트 폴더의 index.html이 오픈되어 모바일 목업에 내용을 보여주고, 모바일로 접속하면 루트 폴더가 아니라 mobile 폴더내 index.html로 접속되도록 구현합니다.

  • 필수 플러그인 설치
    • Export Original Images
    • Photoroom - AI and Background Remove
    • Font Scanner
 

참조할 Figma 디자인

Figma 디자인을 참조하여 아래 페이지를 완성합니다.

  • 인트로페이지
  • 로그인-회원가입 선택 페이지
  • 로그인
  • 회원가입
  • 상품 홈
  • 상품 상세 페이지
  • 장바구니
  • 마이페이지
 

주요 학습 내용을 소개합니다.

📒인트로 페이지

모바일 기기 감지하기

javascipt를 활용하여 사용자 기기를 구분하는 방법을 학습하고 기기에 따라 목업 또는 모바일 전용 페이지로 이동시킵니다. 이때 사용자가 사용하는 브라우저의 고유 속성 navigator.userAgent값을 확인하여 구분하는 방법을 학습하게 됩니다.

Swiper JS 파라미터 활용

가장 널리 사용되는 대표적인 javascript 라이브러리인 swiper.js를 활용하여 자동 슬라이드를 구현하고, 기본적으로 원형으로 제공되는 페이저의 스타일을 변경합니다.

 

페이저 스타일 변경하기

 

📒로그인 - 회원가입 구분 페이지

하나의 요소에 여러개의 배경이미지를 지정하고, 각각의 위치를 디자인와 같이 일치하도록 배치합니다.

 

 

 

📒로그인, 회원가입

linear-gradient를 활용하여 페이지 헤더의 배경을 지정합니다. 디자인에서 배경 속성을 확인하여 스타일을 작성합니다.

 

input요소중 checkbox는 브라우저 고유의 스타일을 변경할 수 없습니다. 변경할 수 없는 요소는 화면에서 사라지도록 하고 다른 요소에 스타일을 작성하여 디자인과 일치하도록 구현합니다.

스타일을 변경할 수 없는 체크박스

 

체크하면 스타일이 변경되는 체크박스

 
 

📒상품 홈 페이지

사용자 속성을 활용하여 알림창, 장바구니 아이콘의 숫자 카운트를 구현합니다.

 

 

📒마무리

본 과정은 실제 쇼핑몰을 구현하는 과정은 아닙니다. 웹퍼블리셔로서 디자인을 참조하여 최종 화면의 틀까지만 작성하는 과정입니다. 그래서 로그인에서 내용을 입력하고 전송 버튼을 눌렀을 때 실무에서는 입력한 내용을 검증하고 데이터베이스 서버에 조회후 일치여부를 파악후 본페이지로 이동하는 과정으로 구현해야 하지만, 본 강의에서는 action 속성의 값으로 임시로 연결했습니다.

HTML, CSS, Javascript만으로 구현하는 정적인 페이지이기 때문에 로그인, 회원가입, 장바구니에 담기, 삭제하기, 결제 진행하기등 모두는 페이지만 연결하는 수준으로 작성했으니 참고해주세요.

 

퍼블리셔 실무에서는 form에서 입력시 연결되는 작업까지는 할 필요가 없습니다. 프론트엔드 개발자 또는 백엔드 개발자가 웹퍼블리셔가 작업한 결과물에 DB 연동 및 서버단 스크립트를 작성하여 완성하게 되는 것입니다.

웹퍼블리싱->프론트엔드->백엔드의 프로세스가 궁금하신 분은 제 유튜브 채널의 게시판이나 쇼핑몰 구현하기 영상을 참조해보세요.

 

https://inf.run/5vx9u

 

모바일 웹 제작 입문: Figma 디자인 완벽 구현하기 with Javascript 강의 | 이지웹 - 인프런

이지웹 | , Figma 디자인을 참조하여 HTML/CSS, Javascript를 활용하여 모바일 웹사이트를 구현합니다. 모바일 디자인을 분석하여 유지관리가 용이한 웹사이트를 구현해보세요.본 과정은 HTML, CSS, Javascri

www.inflearn.com

 

반응형

html,css, javascript(jquery) 기초가 있으신가요? 그런데 전체 웹사이트 전체를 어떻게 만들지 잘 모르시나요? 그렇다면 디자인을 참조해서 쇼핑몰 메인페이지 구현을 도전해보세요. 완성된 디자인을 참조하고 기획 의도와 디자인의 상세한 사항들을 파악하여 웹사이트를 구현하는 노하우를 알려드립니다.

 

인프런에서 만나보세요 : https://inf.run/CZ1az

 

초급자를 위해 준비한 [웹 개발, UX/UI] 강의입니다.

 

이런 걸 배워요!

  • Figma 디자인 해석과 이미지 추출하기
  • HTML/CSS 파일 초기 세팅하기
  • CSS 변수 및 글로벌 스타일 작성하기
  • 웹폰트 사용 설정하기
  • 레이아웃 설계: Grid와 Flexbox 활용하기
  • 미디어쿼리 활용 반응형 CSS 구현하기
  • 컨테이너 쿼리 활용 반응형 CSS 구현하기
  • Swiper.js를 활용한 리뷰 슬라이드 제작하기
  • jQuery활용 모바일 메뉴, 장바구니 토글 슬라이드 제작하기
  • GitHub Pages 활용 웹사이트 배포하기

본 과정은 HTML, CSS, Javascript, jQuery 기초가 있어야 원할하게 학습하실 수 있습니다.

각 파트별 학습은 아래 링크를 확인해주세요.

html, css, javascript(jQuery)의 기초는 있지만 종합적으로 적용하기에 막막하다면 본 강의를 확인해보세요. 

디자인에서 레이아웃 및 스타일을 확인하고 반응형까지 구현하는 종합 강의가 되겠습니다. 

많은 관심부탁드립니다. 

 

 

 

반응형

+ Recent posts