Learn JavaScript for Designers

Bring your websites to life with interactive elements using JavaScript. These tutorials are tailored to web designers and are full of practical examples and tips.
  1. CSS와 JavaScript를 사용해 수평방향 타임라인 만들기

    CSS와 JavaScript를 사용해 수평방향 타임라인 만들기

    Tutorial Intermediate

    저는 지난 글에서 기초부터 작성하는 수직방향의 반응형 타임라인을 제작하는 방법을 알려드렸습니다. 오늘은 그와 관련하여 수평방향 타임라인을 만드는 과정을 내용으로 다룰 겁니다.

  2. 패럴랙스 스크롤링이란?

    패럴랙스 스크롤링이란?

    Tutorial Beginner

    여러분이 프론트 엔드 개발에 참여해 본 적이 있다면 '패럴랙스 스크롤링'이란 용어를 들어보았을 것입니다. 제 수업인 제작하기 쉬운 스크롤 이벤트에서 발췌한 짧은 동영상에서 패럴랙스 스크롤링을 정의하고, 온라인에 있는 몇 가지 예제를 살펴보겠습니다.

  3. 스크롤링 "Alien Lander"웹 사이트를 코딩하는 방법

    스크롤링 "Alien Lander"웹 사이트를 코딩하는 방법

    Tutorial Intermediate

    이 튜토리얼에서는 두 번째 시리즈 인 두 번째 시리즈에서 율리아 소콜 로바 (Yulia Sokolova)의 "웹 사이트에서 긴 스크롤 배경을 만드는 방법"이라는 멋진 벡터 기반 일러스트레이션을 찍어 라이브 사이트로 코딩합니다.

  4. 스크롤로 움직이는 페이지에서 헤더를 고정하는 방법

    스크롤로 움직이는 페이지에서 헤더를 고정하는 방법

    Tutorial Beginner

    이번 튜토리얼에서는 요즘에 웹사이트에서 많이 보이는 패턴을 제작해 보도록 하겠습니다. 스크롤 해서 페이지를 이동할 때 매끄럽게 애니메이션 되는 고정 헤더입니다. 기본 구조부터 잡고 나서 CSS와 순수 자바스크립트를 이용해 동작하도록 하겠습니다. 마무리하기 전에는 코드의 최적화...

  5. HTML5 오디오 플레이어 제작해보기

    HTML5 오디오 플레이어 제작해보기

    Tutorial Intermediate

    이 튜토리얼은 여러분에게 HTML5 오디오를 소개하고 자신만의 플레이어를 제작하는 방법을 알려드립니다.