- [interactive web] 스크롤에 따라 svg path 변화시키기 (1부터 9까지 숫자 변형하기)
스크롤하면 숫자 1부터 9까지 모양이 점진적으로 변하도록 만들어보았다. 각 숫자의 형태를 만들기 위해 웹에서 사용가능한 벡터 이미지인 SVG를 이용해 구현했다. SVG가 뭐지? 라는 분들이 있다면 W3Scools의 SVG Tutorial을 읽어보자.…
26 January, 2020
- [interactive web] 이전에 만들었던 roulette 개선하기
이전에 만들었던 roulette는 실제 프로젝트에서 사용하기에는 다소 무리가 있다. 애초에 테스트 용도로 만들었기 때문이다. 실제 프로젝트에서 사용 가능하도록 몇가지를 수정하려고 한다. 항목은 다음과 같다. deprecated된 clip 속성을 제거…
15 December, 2019
- [interactive web] 스크롤(scroll) 이벤트로 목록을 더 아름답게 만들어보자
애플의 웹 사이트는 멋지다. 사이트에 특별한 기능이 있는건 아니다. 대부분 제품 소개 페이지다. 제품 소개페이지를 얼마나 잘 만들었길래, 뭐가 멋지다는걸까? 의문이 들 법하다. 그런데, 하나하나 살펴보면, 정말 세심하게 공들인 느낌이다. 단순한 웹 …
13 October, 2019
- [interactive web] 2019 if kakao 홈페이지 메인 배너를 css로 만들어보자 (feat. svg)
if kakao가 매우 성황리에(?) 마무리되었다. 공식적인 if kakao 행사가 두번째임에도 불구하고 꽤 완성도 있었다 생각한다. 특히 의 리액트: 그것마저 결정해주마와 의 프론트엔드 기술로 동료들 삶의 질 높여주기 세션이 아주 흥미로웠다. 첫번…
22 September, 2019
- [interactive web] 404 페이지를 만들어봤다
페이이지를 만들었다. 404페이지가 뭔지 모르는 분은 없겠지만, 간단히 말하면 페이지를 찾지 못했을때 나타하는 에러 페이지다. 정상적이 상황에서 보이는 페이지가 아니기 때문에 대부분 서비스를 만들때 중요하게 생각하지 않는다. 하지만, 유명한 웹 서비…
04 August, 2019
- [interactive web] css로 roulette 만들기
웹 서비스를 이용하다보면 간혹 룰렛 형태의 뽑기 게임을 볼 때가 있다. 주로 적립금(캐시)이나 상품을 주기위한 목적으로 만든다. 그런데 이런 룰렛 게임을 하나의 원형 이미지만으로 만드는 경우가 많다. 일회성으로 사용할때면 아무 문제 없지만, 당첨되는…
27 June, 2019