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

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)의 기초는 있지만 종합적으로 적용하기에 막막하다면 본 강의를 확인해보세요. 

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

많은 관심부탁드립니다. 

 

 

 

반응형

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

CSS GRID 마스터: FIGMA 디자인 웹구현 실전  (0) 2025.03.29
아직도 살아 있는 불사의 jQuery - 기초 부터 실무까지  (0) 2025.02.19
모바일 웹 제작 입문: Figma 디자인 완벽 구현하기 with Javascript  (0) 2025.02.10
웹프로그래밍의 꽃! 자바스크립트 기초 인프런 강의가 오픈되었습니다.  (1) 2024.12.20
그린컴퓨터아트학원 KDC 온라인과정 안내드립니다.
100%온라인수업입니다. 편한시간에 언제든 수강하실수 있습니다.

[훈련대상]

•국민내일배움카드를 발급받은 자
•「K-디지털 기초역량훈련」수강 신청일 기준, 직업능력개발계좌 유효기간이 남아있는자

[훈련혜택]
• 과정신청시 수강비용의 10% 자비 부담
• 과정 80%이상 수료시 자비부담금 전액 환급

[훈련내용]
•  프로그래밍 언어, 웹∙앱 개발, 데이터베이스 입문 등의 기초 내용으로 구성
•  수준은 초급·중급으로 구분하여 운영, 취향에 맞는 과정을 선택하여 100% 온라인으로 수강
 
[과정소개]
1) 디지털역량 제고를 위한 웹구조 언어&웹스타일링 언어 기초 4/3~4/28 (30일/20H)225,000원(자부담 22,500)
2) 실무능력까지 길러주는 인터랙티브 웹 디자인 기초 입문(HTML선수학습필수) 4/3~4/28(30일/20H) 225,000원(자부담 22,500)
3) 디지털역량 제고를 위한 다이나믹 클라이언트 사이드 스크립트 기초 4/3~4/28 (30일/20H) 95,000원(자부담 9,500)
4) 입문자를 위한 데이터베이스 & SQL 기초부터 활용까지 4/3~4/28 (30일/20H) 170,000원(자부담 17,000)
 

수강 상담신청하기

반응형

https://youtu.be/who42wBr1ns

POSITION Sample : https://codepen.io/alikerock/pen/zadQQW

FLEX 활용 Sample : https://codepen.io/alikerock/pen/Yvxbb

- Position

- Flex 컨텐츠의 양이 적어도 푸터를 하단에 고정하는 방법 2가지

 

#css #position #flex

구독하기(subscribe now) : https://bit.ly/30wbC1y

오프라인 수업 문의: ezwebpub@gmail.com

주말반 수강신청: https://alikerock.tistory.com/notice/165

후원하기 : https://toon.at/donate/ezwebpub

반응형

'Youtube 동영상 > css3' 카테고리의 다른 글

IR기법 2가지 - 네이버, 애플 로고 텍스트를 이미지로 교체하  (0) 2022.03.30
네이버와 애플의 로고에 쓰인 IR 기법  (0) 2022.03.28
CSS3 - 86 [ position:sticky ] script 없이 순수 CSS로 스크롤을 할 때 요소를 고정하기  (0) 2019.11.20
CSS3 - 85 [ CSS ANIMATION ] 공지 카드 애니메이션, card notification css animation  (0) 2019.10.27
CSS3 - 84 [ CSS ANIMATION ] 토글 슬라이드 버튼 애니메이션, form, flex, position, transition, css3 animation  (1) 2019.10.27

https://youtu.be/Rvv_X2mAcDI

LookBook P1/8 Download(파트1의 예제만 제공합니다. 순서대로 학습 바랍니다.) https://drive.google.com/file/d/1FMFeQpHlGFxDTQ5Yh4RjYtq-p4JucXqz/view?usp=sharing

 

예제 이미지 다운로드

https://drive.google.com/file/d/10lwzYg9yFkjzhR6rByXiM-l9Fb9lojay/view?usp=sharing

 

 

반응형

'Youtube 동영상 > psd to html & css' 카테고리의 다른 글

PSD TO HTML 76 [ LookBook P6/8 ] 모바일 디자인 참조 코딩하기 파트6 - ASIDE 토글 메뉴 구현하기  (1) 2019.12.27
PSD TO HTML 75 [ LookBook P5/8 ] 모바일 디자인 참조 코딩하기 파트5 - ASIDE 메뉴, 레티나 배경 지정하기  (0) 2019.12.27
PSD TO HTML 73 [ LookBook P3/8 ] 모바일 디자인 참조 코딩하기 파트3 - 검색창, 레티나 고해상도 기기 모바일 이미지, retina JS  (0) 2019.12.27
PSD TO HTML 72 [ LookBook P2/8 ] 모바일 디자인 참조 코딩하기 파트2 - 본문 헤더, 검색, 크로스 브라우징  (0) 2019.12.27
PSD TO HTML 71 [LookBook P1/8 ] 모바일 디자인 참조 코딩하기 파트1 - Aside, 본문 리스트, 모바일 메뉴 구조, 폰트어썸  (0) 2019.12.27

https://youtu.be/IxRRA-lXx1Q

javascript & jQuery 비교 구현하기

Sample Download https://drive.google.com/file/d/1R0PigzZWygkFUUfSQ3508ZSb4Dxxu-24/view?usp=sharing

 

에디터: visual studio code

티스토리 : http://alikerock.tistory.com/

후원하기 : https://toon.at/donate/ezwebpub

#javascript #jquery #css #animation

반응형

'Youtube 동영상 > javascript & jQuery' 카테고리의 다른 글

jQuery 82 javascript 27 [ Shrink Nav ] 순수 자바스크립트와 제이쿼리 비교 - 스크롤 메뉴 축소 애니메이션  (0) 2019.12.27
jQuery 81 javascript 26 [ Advanced Sticky Header ] 순수 자바스크립트와 제이쿼리 비교 - 상단 고정 메뉴 구현하기  (0) 2019.12.27
Javascript 24 [ Slideshow ] 순수 자바스크립트 슬라이드 업그레이드하기 part 1, 좌우 컨트롤 구현하기  (0) 2019.11.26
jQuery 79 [ script efficiency ] 스크립트 성능, 효율성 높이기, 애니메이션은 css 또는 script ? 어느것이 좋을까?  (0) 2019.11.26
jQuery 78 [ Flex Slideshow ] 플렉스 기반의 슬라이드쇼 구현하기, display:flex  (0) 2019.11.20

https://youtu.be/4XhUOflla64

javascript & jquery 효율적으로 작성하기 1
https://codepen.io/alikerock/pen/BbqNaZ

javascript & jquery 효율적으로 작성하기 2
https://codepen.io/alikerock/pen/gEBazE


티스토리 : http://alikerock.tistory.com/
트위터: eztoweb

#jquery #css #animation

구독하기(subscribe now) : https://bit.ly/30wbC1y

오프라인 수업 문의: ezwebpub@gmail.com

평일반 수강신청: https://alikerock.tistory.com/notice/295
주말반 수강신청: https://alikerock.tistory.com/notice/165

반응형

'Youtube 동영상 > javascript & jQuery' 카테고리의 다른 글

jQuery 80 javascript 25 [ Scroll Menu ] 순수 자바스크립트와 제이쿼리 비교 - 스크롤 메뉴 구현하기  (0) 2019.12.27
Javascript 24 [ Slideshow ] 순수 자바스크립트 슬라이드 업그레이드하기 part 1, 좌우 컨트롤 구현하기  (0) 2019.11.26
jQuery 78 [ Flex Slideshow ] 플렉스 기반의 슬라이드쇼 구현하기, display:flex  (0) 2019.11.20
Javascript 23 [ Video Audio ] 자바스크립트, 제이쿼리 비디오 오디오 컨트롤하기  (0) 2019.11.20
jQuery 77 [ skrollr ] 패럴렉스 스크롤 구현하기, 스크롤러 라이브러리로 아주 쉽게 구현하기  (0) 2019.11.20

https://youtu.be/xX1RllzLLSU

 

Sample Link : https://codepen.io/alikerock/pen/ZEzVJdL

- CSS Position
- IE Polyfill

Positon: sticky 지원현황 보기
https://caniuse.com/#search=sticky

플렉스 레이아웃 보기: https://youtu.be/_PSy66fkQ7U
패키지 매니져 Yarn : https://youtu.be/7g21TUOkSLM
Position Sticky Pollyfill : https://github.com/wilddeer/stickyfill


#css #position #pollyfills


구독하기(subscribe now) : https://bit.ly/30wbC1y

오프라인 수업 문의: ezwebpub@gmail.com

평일반 수강신청: https://alikerock.tistory.com/notice/295
주말반 수강신청: https://alikerock.tistory.com/notice/165

반응형

'Youtube 동영상 > css3' 카테고리의 다른 글

네이버와 애플의 로고에 쓰인 IR 기법  (0) 2022.03.28
CSS3 - 87 [ Fixed Footer ] 콘텐츠 양이 짧아도 하단에 푸터 고정하기 2가지 방법, position 활용, Fixed 활용하기  (0) 2020.01.19
CSS3 - 85 [ CSS ANIMATION ] 공지 카드 애니메이션, card notification css animation  (0) 2019.10.27
CSS3 - 84 [ CSS ANIMATION ] 토글 슬라이드 버튼 애니메이션, form, flex, position, transition, css3 animation  (1) 2019.10.27
CSS3 - 83 [ CSS GRID #7] 그리드와 플렉스를 활용한 반응형 레이아웃 구현하기  (0) 2019.08.07

https://youtu.be/HJG2MuosALk

Sample Link : https://codepen.io/alikerock/pen/GBzzoX


- CSS Animation
- Cubic Bezier


#css #animation

홈페이지 : http://alikerock.tistory.com/

구독하기(subscribe now) : https://bit.ly/30wbC1y

오프라인 수업 문의: ezwebpub@gmail.com

평일반 수강신청: https://alikerock.tistory.com/notice/295
주말반 수강신청: https://alikerock.tistory.com/notice/165

반응형

'Youtube 동영상 > css3' 카테고리의 다른 글

CSS3 - 87 [ Fixed Footer ] 콘텐츠 양이 짧아도 하단에 푸터 고정하기 2가지 방법, position 활용, Fixed 활용하기  (0) 2020.01.19
CSS3 - 86 [ position:sticky ] script 없이 순수 CSS로 스크롤을 할 때 요소를 고정하기  (0) 2019.11.20
CSS3 - 84 [ CSS ANIMATION ] 토글 슬라이드 버튼 애니메이션, form, flex, position, transition, css3 animation  (1) 2019.10.27
CSS3 - 83 [ CSS GRID #7] 그리드와 플렉스를 활용한 반응형 레이아웃 구현하기  (0) 2019.08.07
CSS3 - 77 [ CSS GRID #1] 비정형 레이아웃, 그리드에서 벗어나 자유롭게 레이아웃을 잡자! display:grid  (0) 2019.07.25

+ Recent posts

티스토리툴바