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

이번 튜토리얼에서 우리는 소위 "인라인으로 된 공유하기 메뉴"의 제작 방법을 학습할 것입니다. 이 인터페이스는 독자가 페이지를 공유하고, 하이라이트 표시된 텍스트를 인용할 수 있는 메뉴를 띄우는 방식으로 동작합니다. 여러분은 Medium처럼 몇몇 유명한 사이트에서 이와 유사한...

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

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

따라서 HTML 템플릿을 구입한 후에 온라인에 넣기 전에 사용자 정의해야 하지만 코드에 익숙하지 않은 당신은 어떻게 해야 하는지 잘 모릅니다. 이 튜토리얼에서는 전체 과정을 단계별로 진행할 것이므로 쉬워야합니다.

요즘에는 점점 더 많은 웹사이트들이 GIF, SVG, WebGL, 배경 비디오 등의 형태를 이용하여 애니메이션을 사용하고있습니다. 제대로 사용한다면 웹 상의 애니메이션들은 웹사이트의 활력을 불어넣고 상호작용을 이끌어낼 수 있으며 이는 별도의 피드백 요소와 경험을 사용자에게 추가로...

모든 과정을 이해하는 최고의 방법은 처음부터 끝까지 직접 제작해보는 것입니다. 오늘은 HMLT 이메일 템플릿을 처음부터 구축하면서 이메일 디자인에 그 방법을 실행해 보도록 하죠. 시작 시작하기에 앞서 제가 여기 사용한 소스의 출처를 알려드리겠습니다.

UI 디자인에 맞는 스크롤바의 룩앤필(look and feel)을 제작할 수 있도록 이 꿀팁에서 그 방법을 알려드리겠습니다. CSS에서 웹킷 브라우저가 제공하는 기능을 살펴보고, 그 외의 브라우저에서도 제공되도록 jQuery 대비책(fallback)을 활용할 것입니다.

자바스크립트 없이 어떻게 체크박스와 라디오 버튼에 스타일을 적용할지 궁금한 적이 있나요?