https://youtu.be/kC373znnx34

 

스크롤 애니메이션, 이제 라이브러리 없이도 충분합니다! 🙂

안녕하세요! 이번 영상에서는 라이브러리 없이 오직 JavaScript와 CSS만으로 멋진 스크롤 애니메이션을 구현하는 방법을 소개해드립니다.

 

GSAP이나 ScrollTrigger 같은 강력한 도구도 좋지만, 간단한 효과라면 굳이 무거운 라이브러리를 쓸 필요 없겠죠? 이 영상에서는 가볍고 심플하게, 하지만 확실한 애니메이션 효과를 만들어보는 방법을 알려드립니다.

📌 영상에서 다루는 내용:

  • 사용자가 스크롤할 때 요소가 화면 안에 들어왔는지 감지하는 방법
  • 요소가 보일 때 애니메이션을 적용하고, 사라지면 다시 숨기는 로직
  • getBoundingClientRect()와 window.innerHeight를 활용한 깔끔한 코드
  • 클래스 토글을 이용해 CSS 애니메이션과 연동하는 방식

초보자도 따라하기 쉬운 구조로 구성했으니, HTML/CSS/JS를 조금만 다뤄봤다면 누구나 도전할 수 있어요!
무거운 라이브러리 없이도 충분히 멋진 웹사이트를 만들 수 있다는 걸 보여드릴게요 🙌

 

 

반응형

인프런 강의 바로가기

초급자를 위해 준비한  [웹 퍼블리싱] 강의입니다.

이런 걸 배울 수 있어요

  • CSS GRID 기본 문법과 속성 완벽 정리
  • 실전 예제와 함께하는 프로젝트 실습
  • 디자인 참조 웹페이지 구현 노하우

CSS GRID는 언제 사용할까요?

아래와 같은 디자인이라면 여러분은 어떻게 스타일을 작성하시나요?

여러분은 아마도 float이용하거나, flex를 이용하여 요소들을 배치하시겠죠? 디자인과 같이 12컬럼 그리드에 맞춰 요소들이 가로, 세로 정렬이 잘 되어 있는 경우에는 float 이나 flex를 이용하여 배치하는 것이 효율적일 겁니다.

그렇다면 아래와 같은 디자인은 어떨까요?

 

위 디자인은 float이나 flex를 이용하여 배치하기 쉽지 않습니다, 그렇다고 모든 요소들을 absolute로 처리하기에는 무리가 있고, 그렇게 처리하면 이후 유지관리도 불편하고 반응형으로 구현한다면 더욱더 유지관리가 힘든 사이트가 되어 버립니다.

위의 예시와 같은 디자인을 참조하여 구현할 때는 아래와 같이 그리드를 설정하고 설정된 그리드에 요소들을 배치하는 CSS GRID 를 활용해야 합니다.

 

 

주요 학습 내용

CSS 그리드의 다양한 속성을 학습합니다.

  1. Grid Basic
  2. Fraction
  3. Positioning - 라인 번호 활용
  4. Positioning - 그리드 셀 이름 활용
  5. auto-fit, min-max 함수
    컨테이너의 너비에 따라 최대한 많은 요소를 배치하는 방법을 학습합니다.

  6. 자동 행 배치
    별도의 높이를 지정하지 않은 행도 공간이 모자른 경우 자동으로 행높이를 설정할 수 있습니다.

  7. 그리드 라인의 이름으로 배치하기
  8. Grid에서만 사용 가능한 새로운 속성
    flex의 align-items과 비슷한 속성을 교차축 뿐만 아니라 주축에서도 활용할 수 있습니다.

  9. Grid에서 사용 가능한 FLEX 속성
    display:grid가 적용된 요소에서도 다양한 flex 속성을 사용할 수 있습니다.

  10. 자동으로 행 배치하기 - auto-fit, auto-fill
    가능한 한 많은 열을 배치하고, 남는 공간을 처리하는 방법을 학습합니다.

  11. 웹사이트 구현하기 - article layout
    학습한 grid 속성을 활용하여 간단한 웹페이지를 구현합니다.
  12. Grid와 flex활용
    css grid와 flex를 활용하여 웹페이지 스타일을 작성하는 방법을 학습합니다.

디자인 참조 웹사이트 구현 노하우를 학습합니다.

디자인 파악 및 요소 생성

디자인에서 코딩 친화적으로 그룹, 레이어가 정리되어 있는지 확인하고, 스타일이나 변수가 디자인에 반영되었는지를 파악합니다. 필요한 이미지를 상황에 맞춰 저장합니다.

섹션별 HTML 작성

그룹명을 참조하여 HTML의 큰 섹션을 생성하고, 세부 디자인을 참조하여 내용에 성격에 맞는 적절한 html 태그를 작성합니다. 이때 검색엔진 최적화, 웹표준등을 준수하여 작성합니다.

전체 GRID 레이아웃 설정

배치할 요소에 맞춰 가이드를 추가하여 행과 열의 너비를 확인하기 쉽도록 설정합니다.

섹션별 CSS 작성

주석으로 구분하여 섹션별 CSS를 작성합니다.

라이브러리 활용 슬라이드쇼 구현

버튼을 통해 슬라이드를 이동하거나, 자동 슬라이드를 jQuery 라이브러리를 이용하여 구현합니다.

 

슬라이드 라이브러리 활용하기

 

핵심정리 PDF를 제공합니다.

flex의 모든 속성에 대한 설명과 실습예제 파일을 제공합니다.

 

시작 예제를 제공합니다.

01_grid폴더에는 그리드 핵심 속성에 대한 예제 파일을 제공합니다. 강의를 보면서 학습하실수 있습니다.

 

 

완료 예제를 제공합니다.

완료본 소스를 제공합니다. 수업을 통해 완성한 예제와 비교해보세요.

 

강의 상세 내용 확인하기

 

반응형

'인프런 강의' 카테고리의 다른 글

아직도 살아 있는 불사의 jQuery - 기초 부터 실무까지  (0) 2025.02.19
모바일 웹 제작 입문: Figma 디자인 완벽 구현하기 with Javascript  (0) 2025.02.10
Figma 참조 - 반응형 쇼핑몰 웹사이트 만들기 완벽 가이드  (0) 2025.01.13
웹프로그래밍의 꽃! 자바스크립트 기초 인프런 강의가 오픈되었습니다.  (1) 2024.12.20

전세계 웹사이트에서 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

 

반응형

'인프런 강의' 카테고리의 다른 글

CSS GRID 마스터: FIGMA 디자인 웹구현 실전  (0) 2025.03.29
모바일 웹 제작 입문: Figma 디자인 완벽 구현하기 with Javascript  (0) 2025.02.10
Figma 참조 - 반응형 쇼핑몰 웹사이트 만들기 완벽 가이드  (0) 2025.01.13
웹프로그래밍의 꽃! 자바스크립트 기초 인프런 강의가 오픈되었습니다.  (1) 2024.12.20

+ Recent posts

티스토리툴바