이처럼 jQuery는 오랜 기간 동안 웹 개발의 표준 도구로 자리매김해 왔습니다. 따라서, jQuery를 학습하면 기존의 방대한 코드베이스를 이해하고 유지보수하는 데 큰 도움이 됩니다. 또한, 여전히 많은 웹사이트가 jQuery를 사용하고 있으므로, 이를 숙지하면 다양한 프로젝트에서 유용하게 활용할 수 있습니다.
물론, 최근에는 React나 Vue.js와 같은 최신 프레임워크와 라이브러리가 주목받고 있지만, jQuery의 단순함과 광범위한 호환성은 여전히 매력적인 요소로 남아 있습니다. 따라서, 웹 개발자로서 jQuery를 학습하는 것은 과거와 현재의 기술을 모두 이해하는 데 있어 중요한 밑거름이 될 것입니다.
빙그레 사이트의 경우 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를 구현하여 다양한 이벤트에 따라 효과가 구현되도록 작성합니다.
웹 개발의 첫 걸음을 떼셨나요? HTML, CSS, javascript를 이제 막 시작하신 분들께 특별한 제안을 드립니다! 모바일 시대에 발맞춰 모바일 웹사이트를 만들고 싶지만, 어디서부터 시작해야 할지 망설여지시나요? 걱정하지 마세요. Figma 모바일 디자인을 직접 분석하고 구현하면서, 자연스럽게 반응형 웹 개발의 핵심을 배워보세요. 세련된 모바일 디자인을 토대로, 사용자의 마음을 사로잡는 섬세한 인터랙션부터 다양한 화면 크기에 완벽하게 적응하는 기술까지, 모든 것을 함께 알아가볼 수 있습니다. 이제 여러분의 웹사이트가 모든 기기에서 빛나도록, 노하우를 나눠드리겠습니다. 함께 시작해볼까요?
완성된 웹페이지를 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 연동 및 서버단 스크립트를 작성하여 완성하게 되는 것입니다.
웹퍼블리싱->프론트엔드->백엔드의 프로세스가 궁금하신 분은 제 유튜브 채널의게시판이나 쇼핑몰 구현하기 영상을 참조해보세요.
