웹솔루션개발 25년 노하우! 해피CGI의 모든것

모바일용 이미지 슬라이드 Custom scroll slider로 슬라이더바를 이용한 이동, 터치를 이용한 이동이 가능합니다. html, css, js를 이용하여 구성 및 이용이 가능하며, js내 옵션 변경을 통해서 간격 너비, 속도 제어등이 가능합니다. 또한 html 소스를 개수도 자유롭게 늘릴 수 있습니다.

스마트폰, 태블릿, 모니터 등 화면 크기나 픽셀등을 한번에 확인할 수 있는 사이트입니다. 모바일 앱 및 모바일 사이트를 제작하는 분들은 많이들 이용하시는 사이트이며, 반응형 프로젝트등에서도 미디어쿼리의 사이즈를 지정할때 유용할듯하네요. 핵심적인 디바이스별 사이즈인 width, h, device width 값으로 확인하실 수 있습니다. 그나저나 정말 다양한 기기별 해상도입니다.. 점점 맞춰 진행하는게 쉬운일이 아니게 되가네요^^

원하시는 이미지를 업로드하면 3D 목업형태의 모바일 기기에 업로드한 이미지가 출력되며, 업로드된 이미지를 이용하여 여러 배치 및 위치별 모바일 화면을 확인할 수 있는 툴입니다. 홈페이지 접속후 "start the generator" 를 클릭하면 이미지 편집 및 목업이미지를 확인할 수 있습니다. 업로드 버튼을 클릭하여 반영하고자 하는 사진이미지를 선택합니다. 일반적으로 로고나 index 화면등의 이미지를 등록하시면 적합합니다. 하단의 툴 설정부분으로 배경색상 및 각종 컬러 등의 설정이 가능합니다. 회전방향을 설정하여 아래와 같은 눕혀있는 형태의 목업 디스플레이도 가능합니다. ​ ​

모바일 사이트 UI 제작을 위한 프레임워크 jquery mobile jquery mobile은 HTML5 및 CSS3의 기본지식만 있어도 손쉽게 다양한 디바이스의 반응형 UI 제작이 가능합니다. https://jquerymobile.com/ 위 사이트에 가서 최신 버전을 다운로드 및 연결해주고, http://demos.jquerymobile.com/1.4.2/transitions/ 위 사이트에 가서 원하는 타입을 찾아서 선택한 타입의 view Source를 복사 붙여넣기 하면 바로 적용이 됩니다. 확인은 크롬 모바일 버전으로 가능하겠죠... 간단하고 쉽고, 깔끔한 모바일 모바일 사이트 UI 제작용 프레임워크 jquery mobile 입니다.

모바일에서 보다 편리하게 값을 입력하기 위한 코딩으로, input을 어떻게 설정하냐에 따라 아이폰의 키보드 배열방식이 달라지게 됩니다. type=text type=email type=tel type=url

모바일 UI작업시 꼭필요한 꿀팁들만 모여있는 사이트 입니다. 개인이 운영하는 사이트입니다. 미처 생각하지 못했던 사사로운 UI 디자인 가이드가 있어서 디자이너에게는 즐겨찾기 해두고 자주 찾아보는 사이트가 아닐까 싶어 공유합니다. 브런치에서 연재중이신 분의 사이트이며 현재 해당 블로그에 여러버전의 글도 함께 올라와 있으니 참고하시기 바랍니다. https://brunch.co.kr/@chulhochoiucj0/8