BBC 인터랙티브 페이지 "코로나19가 바꿀 사무실의 미래" 클론

SNS에서 인기리에 공유되고 있는 BBC의 "코로나19가 바꿀 사무실의 미래" 인터랙티브 페이지의 핵심 기능을 똑같이 만들어 봅니다.

(5.0) 수강평 191개

수강생 3,380명

1분코딩

인터랙티브 웹 클론코딩

먼저 경험한 수강생들의 후기

이런 걸 배울 수 있어요

자바스크립트 UI 개발
스크롤을 이용한 인터랙션

기본적인 스크롤 액션으로 재미있는 웹 콘텐츠를 만들어 보세요!

코로나19 시대, 다들 안녕하신가요?
페이스북 등에서 많이 공유되었던 BBC 비주얼저널리즘팀의 "재택근무의 일상화.. 코로나19가 바꿀 사무실의 미래" 인터랙티브 페이지를 비슷하게 만들어 봅니다.
position sticky, IntersectionObserver 등의 최신 기술들을 활용해서 효율적으로 만드는 방법을 알려드릴게요.
기본 스크롤 액션을 이용한 기법이므로 재미있는 웹 콘텐츠 제작에 여러가지로 활용하기 좋을 거예요!

이 분, 많이 보셨죠? 😊

얘는 많이 못보셨죠..? 😅

1분코딩의
다른 강의가 궁금하다면?

1분코딩 인터랙티브 웹 로드맵
"Oh!" 감탄사가 나오는
역동적인 인터랙티브 웹사이트를 만들어요.

이런 분들께
추천드려요

학습 대상은
누구일까요?

크리에이티브 넘치는 인터랙티브 웹 구현에 관심있는 분
특별한 포트폴리오 웹사이트를 만들고 싶은 분
평소 1분코딩의 강의가 좋았던 분들

선수 지식,
필요할까요?

CSS, 자바스크립트 기초

안녕하세요
입니다.

19,492

명

수강생

1,260

개

수강평

1,175

개

답변

5.0

점

강의 평점

개

강의

서울에서 웹 개발자/디자이너로 일했고, 제주를 거쳐.. 현재는 말레이시아 페낭에서 열심히 개발도 하고, 교육 콘텐츠도 만들고, 1인 기업으로서 해볼 수 있는 여러가지 시도와 실험들을 해보고 있습니다.
비주얼 임팩트가 있는 인터랙티브 웹에 관심이 많고, 유튜브와 페이스북 "1분코딩"에서 웹 개발 관련 기술들을 공유하고 있어요.

개발자/디자이너/콘텐츠크리에이터
웹사이트 https://studiomeal.com
유튜브 https://youtube.com/c/1분코딩
페이스북 https://www.facebook.com/1mincoding

커리큘럼

전체

4개 ∙ (1시간 12분)

해당 강의에서 제공:

수업자료

섹션 1. 준비하기

1개

1. 소스코드 다운로드

섹션 2. 페이지 제작하기

3개 ∙ (1시간 12분)

2. CSS 레이아웃
15:36
3. JS part 1
33:32
4. JS part 2
23:39

강의 게시일:

마지막 업데이트일:

수강평

전체

191개

5.0

191개의 수강평

ReKoding
수강평 4
∙
평균 평점 5.0
5
100% 수강 후 작성
무료 영상인데 퀄리티가 좋습니다. 재미있게 잘배웠습니다 감사합니다!
- 1분코딩
  지식공유자
  감사합니다 승현님!
ev79
수강평 1
∙
평균 평점 5.0
5
100% 수강 후 작성
이런 강의가 무료라니! 너무너무 감사합니다.
- 1분코딩
  지식공유자
  감사합니다!
박수진
수강평 5
∙
평균 평점 5.0
5
100% 수강 후 작성
많이 배웠습니다! 복습해서 실력을 늘려가도록 하겠습니다!!! 강사님이 계셔서 ㅠㅠ힘이 납니다!!!!
- 1분코딩
  지식공유자
  화이팅입니다!!
유지인
수강평 1
∙
평균 평점 5.0
5
100% 수강 후 작성
처음 듣는 일분코딩님강의인데 애플코딩편 구매전에 어떤 강의 스타일인지 보고싶었는데, 그 짧은 15분으로도 강의 퀄리티가 느껴지고 재미있네요! 애플편도 구매해야겠습니다.!
- 1분코딩
  지식공유자
  감사합니다 지인님!
김지만
수강평 1
∙
평균 평점 5.0
5
100% 수강 후 작성
진심 도움이 많이 됐습니다.
- 1분코딩
  지식공유자
  감사합니다 :)

무료

1분코딩님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

Three.js로 시작하는 3D 인터랙티브 웹

1분코딩

웹에서 3D를 구현할 수 있는 자바스크립트 라이브러리, three.js의 핵심 개념들을 익히고 응용 예제까지 만들어 보면서 3D 웹 개발에 대한 감을 익혀봅니다.

초급

인터랙티브 웹, Blender, Three.js

Three.js로 시작하는 3D 인터랙티브 웹

1분코딩

Three.js로 1인칭 3D 웹사이트 만들기

1분코딩

데스크탑과 모바일에서 모두 동작하는 1인칭 3D 웹사이트를 만들어 보는 강의입니다.

초급

인터랙티브 웹, Three.js, 3d

Three.js로 1인칭 3D 웹사이트 만들기

1분코딩

CSS Flex와 Grid 제대로 익히기

1분코딩

현재, 그리고 미래의 표준이 될 CSS 레이아웃 작성 방식인 Flex와 Grid에 대해 배울 수 있습니다.

초급

HTML/CSS, Flex

CSS Flex와 Grid 제대로 익히기

1분코딩

인터랙티브 웹 개발 제대로 시작하기

1분코딩

크리에이티브 넘치는 인터랙티브 웹페이지를 개발할 수 있는 기본기를 다질 수 있는 수업입니다.

초급

HTML/CSS, JavaScript, 인터랙티브 웹

인터랙티브 웹 개발 제대로 시작하기

1분코딩

애플 웹사이트 인터랙션 클론!

1분코딩

애플 웹사이트에 자주 등장하는 고급 인터랙션 효과들을 처음부터 직접 개발하는 방법을 배울 수 있습니다.

중급이상

인터랙티브 웹, 클론코딩, JavaScript

애플 웹사이트 인터랙션 클론!

1분코딩

(English) Build a First-person View 3D Website with Three.js

1분코딩

In this lesson, you'll create a first-person 3D website that works on both desktop and mobile.

초급

Three.js, 인터랙티브 웹, 3d

(English) Build a First-person View 3D Website with Three.js

1분코딩

PixiJS로 만드는 2D 그래픽과 게임 with Cursor(AI)

1분코딩

2D 그래픽의 독보적 강자 PixiJS의 기본을 익히고, AI 코드 에디터 Cursor를 이용해 빠르고 효율적으로 개발하는 방법도 배워봅니다.

입문

pixijs, cursor, webgl

PixiJS로 만드는 2D 그래픽과 게임 with Cursor(AI)

1분코딩

웹 애니메이션의 새로운 표준, Web Animations API

1분코딩

라이브러리는 선택이지만, 웹 표준 기술은 필수입니다. 웹 애니메이션의 새로운 표준인 Web Animation API에 남들보다 빠르게 적응하고, 실무에도 바로 활용해보세요!

초급

Web Animations API, JavaScript, HTML/CSS

웹 애니메이션의 새로운 표준, Web Animations API

1분코딩

3D리플릿 만들기 - 인터랙티브 웹 프로젝트

1분코딩

인터랙티브 웹 프로젝트는, CSS와 자바스크립트를 이용해 창의적인 인터랙션이 있는 예제를 하나씩 만들어보는 시리즈입니다.

중급이상

HTML/CSS, JavaScript, 인터랙티브 웹

3D리플릿 만들기 - 인터랙티브 웹 프로젝트

1분코딩

SVG 마스터

1분코딩

웹 벡터 그래픽 SVG를 기초부터 제대로 익히고, 재미있고 다양한 예제들을 통해 원하는 방향으로 응용할 수 있는 기술을 습득합니다.

초급

SVG, HTML/CSS

SVG 마스터

1분코딩

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

도도(코딩루팡)

React, Next.JS 14, TailwindCss, RadixUI, Shadcn, zustand 으로 YoutubeMusic 웹사이트를 클론합니다. NextJS 기초부터 UI 중점으로 웹프론트 기초를 마스터 할 수 있어요.!

초급

Next.js, React, TailwindCSS

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

도도(코딩루팡)

쉽고 빠르게 만드는 다양한 이미지 이펙트!

깡코딩

자바스크립트와 CSS로 흩어진 이미지 조각을 하나의 이미지로 완성하는 다양한 패턴의 이미지 이펙트를 따라 만들고 랜덤으로 나타나도록 처리합니다. 이 수업을 응용한다면 수강생 여러분의 독창적인 이펙트를 만들 수 있을 거라 생각되네요!

초급

JavaScript, HTML/CSS, 인터랙티브 웹

쉽고 빠르게 만드는 다양한 이미지 이펙트!

깡코딩

초보자를 위한 Sass 기초 강의 & 자몽톡 클론코딩

유노코딩

Sass는 CSS의 확장 언어입니다. CSS의 단점을 보완해 뛰어난 생산성을 보장하며, 강력하고 간결합니다. 기초 구문을 배우고, 배운 내용을 활용한 클론코딩을 즐기면서 Sass를 배워보세요. 재미는 더하고 부담은 덜었습니다!

초급

Sass, 클론코딩, HTML/CSS

초보자를 위한 Sass 기초 강의 & 자몽톡 클론코딩

유노코딩

모바일, 태블릿, pc 반응형 인스타그램 클론코딩

더코딩클럽

이 강의를 통해 수강생은 HTML, CSS, JS로 인스타그램과 비슷한 웹서비스를 만들 수있습니다. ( 프론트만 구현했습니다! 백엔드 서버 구축은 차후 강의 촬영 예정입니다.)

초급

HTML/CSS, JavaScript, 클론코딩

모바일, 태블릿, pc 반응형 인스타그램 클론코딩

더코딩클럽

실전! 웹사이트제작! Step by Step! ('라한호텔' 사이트제작_Application Course)

J.영

'호텔 현대라한_목포점' 사이트 제작으로, 실제 웹사이트 메인페이지를 그대로 제작·구현해보는 강의입니다. html/css기초 지식이 있는 분들을 대상으로 html Markup과 Layout제작에 대한 이해는 물론 Fixheader, Image Slider, MenuOpen Bar, Scroll Animation 제작까지의 웹에서 꼭 필요로한 skill을 배울 수 있는 웹페이지 제작 실전! 강의입니다.

초급

HTML/CSS, jQuery, 인터랙티브 웹

실전! 웹사이트제작! Step by Step! ('라한호텔' 사이트제작_Application Course)

J.영

Next.js 15로 완성하는 실전 YouTube 클론 개발

antonio

이 24시간 튜토리얼에서는 자신만의 유튜브 클론을 만드는 방법을 배우게 됩니다. Next 15와 React 19(tRPC 포함), 서버 컴포넌트에서의 프리페칭, 클라이언트 컴포넌트에서의 서스펜스 활용, 비디오 처리, 백그라운드 작업, AI 기능 등 고급 주제들을 다룰 것입니다.

초급

Next.js, React, PostgreSQL

Next.js 15로 완성하는 실전 YouTube 클론 개발

antonio

카페 24 베스트 쇼핑몰 디자인 클론코딩하기 (HTML + CSS)

같이코딩

카페 24에 올라온 베스트 쇼핑몰 디자인을 직접 클론코딩해보며 빠르게 HTML과 CSS를 학습할 수 있습니다. HTML + CSS에 대한 기본적인 이론을 학습하고 직접 클론코딩을 통해 쇼핑몰 디자인을 완성하여 이론에서 배웠던 내용을 적용하고 견고하게 HTML과 CSS의 틀을 잡을 수 있게 강의를 구성했습니다

입문

클론코딩, HTML/CSS, 웹 디자인

카페 24 베스트 쇼핑몰 디자인 클론코딩하기 (HTML + CSS)

같이코딩