코드롭(Codrops)은 웹 디자인과 프런트엔드 제작을 다루는 출판 웹사이트다. 튜토리얼, 실행 가능한 데모, 제작 사례와 선별한 웹사이트를 통해 화면의 결과와 만드는 과정을 연결한다. (웹사이트 소개)
구경한 움직임을 코드로 읽기
- Creative Hub는 자체 제작물과 선별한 데모를, Webzibition은 웹사이트 사례를 모은다. 참고할 화면을 찾는 일과 구현 방법을 읽는 일을 구분해 탐색할 수 있다.
- 튜토리얼과 사례 연구에서는 CSS와 자바스크립트가 화면의 움직임을 어떻게 만드는지 살필 수 있다. 이미지를 넘기는 효과라면 정지 화면뿐 아니라 입력과 전환의 순서가 작업의 일부다.
- 데모의 한 효과를 전시 안내 웹사이트에 가져온다고 가정하면, 작품 제목이 길어지거나 이미지 수가 바뀔 때도 같은 동작이 필요한지 판단해야 한다. 데모와 실제 사용 환경은 같은 코드를 다른 내용에 적용할 때 드러나는 차이다.
- 내려받는 데모는 별도 표시가 없으면 MIT 라이선스를 적용한다. 디자인 무료 자료와 글에는 다른 조건을 두므로 웹사이트 전체를 하나의 이용 허락으로 읽지 않는다. (자료별 이용 조건)