코드롭(Codrops)은 웹 디자인과 프런트엔드 제작을 다루는 출판 웹사이트다. 튜토리얼, 실행 가능한 데모, 제작 사례와 선별한 웹사이트를 통해 화면의 결과와 만드는 과정을 연결한다. ([웹사이트 소개](https://tympanus.net/codrops/about/))

- [공식 웹사이트](https://tympanus.net/codrops/)
- [이용 조건](https://tympanus.net/codrops/licensing/)

## 구경한 움직임을 코드로 읽기

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

## 기타 등등

- 2009년에 시작했으며 초기의 실험 공간에서 튜토리얼과 기술 자료를 다루는 출판물로 이어졌다. [출처](https://tympanus.net/codrops/about/)
- 스튜디오뿐 아니라 디자이너와 개발자를 소개하는 별도의 Spotlight 갈래를 둔다. [출처](https://tympanus.net/codrops/about/)

#웹사이트 #웹디자인 #CSS #자바스크립트