클로리셔 작은 공간

1. 애니메이션 효과 01 라인이 계속 떨어지는 효과로 싱글홈페이지 스크롤 표시에 표현하기 좋음. 예시) HTML S C R O L L CSS .scroll_block { width: 300px; height:300px; border: 1px solid #dfdfdf; } .scroll_block .letters span { display: block; padding: 2px 0; font-size: 12px; text-align: center;} .scroll_block .liner { width: 1px; height: 100px; position: relative; margin: 12px auto 0; overflow: hidden;} .scroll_block .liner::before { cont..

1. UI DESIGN - Button See the Pen Custom circle pointer UI - SVG filter by Rémi TRAN (@trinketmage) on CodePen. See the Pen Share & Social Semicircles by Matthew Juggins (@mattjuggins) on CodePen. See the Pen Custom CSS Checkbox by Derek Morash (@derekmorash) on CodePen. 2. UI DESIGN - Search See the Pen Animated Search by Chris Gannon (@chrisgannon) on CodePen. See the Pen Animated Search Box b..

UI - User Interface Design : 사용자(User) 위주의 인터페이스. 즉, 인터페이스를 만드는 기술과 디자인을 실현시켜 사용하는 것이다. 모바일이나 웹디자인에서의 UI는 보다 세부적인 범위로 그래픽 사용자 인터페이스를 뜻하는데, 사용자가 어떤 프로그램을 접했을 때, 더 효과적이고 편리하게 이용할 수 있도록 메뉴나 버튼 등을 디자인하는 것입니다. 쉽게 설명하자면, 사용자가 길을 헤매지 않도록 표지판 같은 역할을 해주는 것이지요. UX - User Experience Design : 사용자가 제품과 서비스, 그리고 그것을 제공하는 회사와 상호작용하면서 발생하는 모든 경험의 총합을 의미합니다. ‘사용자 경험’이라는 전체적인 콘셉트 아래 프로그램의 개발과 디자인을 디렉팅하게 되죠. 또한, 사..

See the Pen 404 galaxy not found by Rémi Denimal (@remid) on CodePen.

See the Pen Button - checked by chloe Kim (@chlolisher) on CodePen.

핵심 용어 용어 설명 프레임 워크 (Framework) 프레임 제공, 사용자가 동시에 하나 이상의 프로그램 모듈을 사용 할 수 있도록 함. 필요한 기능이 이미 만들어져 있어 틀을 이용해서 컴퍼넌트를 만들어서 완성하는 것. 단점 틀에서 벗어나기 어렵다. 단 하나의 프레임 웍만 사용가능하고 다른거 / 라이브러리랑 충돌. 무겁게 느껴질 수 있다. 라이브러리 (Library) 자주 사용되는 필요한 부분을 프로그램으로 모아놓고 가져와서 사용할 수 있게 한 것. 충돌이 없다. API 미리 만들어놓은 라이브러리를 가져와서 쓰는 기능. UI (User Imterface) 사용자 위주의 인터페이스. UX (User Experience) 사용자 경험의 인터페이스. :: 자바스크립트랑 제이쿼리의 차이가 뭐냐고? 우연히 본 ..