| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 |
- #홈페이지
- happycgi
- 쇼핑몰
- 게시판
- #이미지
- 해피CGI
- #CSS
- #동영상
- #홈페이지제작
- jquery
- #image
- 웹솔루션
- #happycgi
- 해피씨지아이
- 홈페이지
- 솔루션
- CGIMALL
- #웹솔루션
- #업종별
- #쇼핑몰
- 홈페이지제작
- #뉴스
- javascript
- CSS
- #솔루션
- #해피CGI
- 사이트제작
- #jQuery
- #cgimall
- php
- Today
- Total
목록모바일 (9)
웹솔루션개발 25년 노하우! 해피CGI의 모든것
[해피CGI][cgimall] 모바일 UI·UX 디자인시 고려해야할 가이드라인
모바일 ui 기획 및 디자인시 유의해야할 사항과 디자인을 참고할수 있는 내용이 담겨있습니다. 모달창의 닫기 버튼, 확인 버튼 등 코딩시 크게 신경쓰지 않았던 부분을 자세히 설명해주고 있습니다. 한번 읽고나면 모바일 작업시 상당히 도움이 될것이라 생각합니다 ~~^^ 아래 링크에서도 해당 사이트를 확인할 수 있습니다 https://brunch.co.kr/@chulhochoiucj0/8 https://brunch.co.kr/@chulhochoiucj0/9
모바일 관련 ui가 기능별 페이지별로 분류되어 있어 웹이나 앱 디자인시 쉽게 벤치마킹 할 수 있습니다. 동일한 기능이라도 다른 디자인의 ui 를 참고할 수 있습니다.
[해피CGI][cgimall] 모바일에서 플래시가 보이지 않아요
최근 나오는 대부분의 모바일 기기들은 플래시 기능을 지원하지 않습니다. 그래서 모바일 기기를 통해 PC모드를 이용할 경우 플래시 같이 지원되지 않는 기능은 화면에 나타나지 않는 등... 정상작동을 하지 않게 됩니다. * 아래의 이미지는 여행사 솔루션이며 모바일기기로 PC버전의 화면을 봤을때 플래시 부분으로 설정된 곳이 나타나지 않고 있습니다. 이러한 문제는 모바일 기기에서 플래시 기능을 지원하지 않는한 해결되지 않습니다. (저희 해피CGI의 모바일 솔루션에서 플래시와 관련된 기능이 없는 이유입니다.) 그래서 많은 분들이 모바일 기기에 최적화된 모바일 솔루션을 별도로 이용하고 계십니다. * 아래의 이미지는 여행사 솔루션의 모바일버전입니다. 모바일기기에 맞도록 설정되어져 있습니다. 만약 모바일버전을 이용하지..
[해피CGI][cgimall] 모바일에서 화면에 맞게 이미지 출력하고 싶어요
모바일 화면에 맞게 이미지가 출력되도록 아래 CSS 스타일 설정이 필요합니다. .freeimg img{max-width:100%; height:auto;} 모바일웹은 최대한 이미지를 사용하지 않고 텍스트와 CSS 를 사용하여 기기의 다양한 해상도를 고려하여 제작이 필요합니다. A영역 B역 테이블의 고정된 width 픽셀값이 아니라, % 기준으로 하셔야 합니다. < ..
[해피CGI][cgimall] 모바일에서 이미지등록후 이미지가 90도 180도로 회전되었어요
모바일(스마트폰)에서 이미지를 등록할 때에 모바일(스마트폰)에서는 이미지가 정상적으로 보이므로, 등록하게 됩니다. 하지만, 등록후에는 모바일사이트에서는 이미지가 90도 180도로 회전된 것처럼 보이는 경우가 있습니다. 핸드폰으로 찍었을 경우, 핸드폰에서는 가로, 세로 프로그램으로 자동 회전되어 정상적으로 한 방향으로 보이게 됩니다. 하지만, 저장된 이미지를 다운받아 PC에서 확인해 보면, 아래와 같이 다른 경우입니다. PC 또는 서버에서는 핸드폰처럼 자동인식이 되지 않으므로 저장된 파일을 확인하여 알씨, 포토샵등에서 회전한 파일로 다시 등록해 보시면 정상적으로 확인됩니다.
[해피CGI][cgimall] 모바일 바탕화면에 바로가기 아이콘은 어떻게 추가하나요?
(안드로이드폰 / 아이폰) 바탕화면에 "아이콘 바로가기" 생성 방법은 다음과 같습니다.
모바일 정보를 체크 할수 있는 감지/분석도구 입니다. 모바일폰 / 테블릿 등 을 구분 하고 OS 및 기종을 구분할 수 있어 모바일 웹 개발에 도움이 될것 같습니다. 오픈소스로 개발되며 사이트에서도 다운로드 가능합니다. 개발소스도 gitHub 에서 공개 되어 있습니다. 사용법은 설멸 따로 안해도 쉽게 되어 있어 초급 개발자도 사용이 편리 할것 같습니다. 크롬브라우져 모바일 테스트 넥서스 5 크롬브라우져 모바일 테스트 아이폰
모바일 홈페이지 코딩과 반응형웹 코딩시 최적화되어 있는 툴입니다. 모바일 디바이스별로 선택하여 기기와 데스크탑 화면을 동시에 볼수 있는부분이 장점입니다. 먼저 위 사이트 링크를 클릭하시거나 아래의 링크를 통해서 실행파일을 먼저 다운로드 받으셔야 됩니다. 실행파일을 다운로드 받으시고 실행시키시면 윈도우 실행창에 아래와같은 아이콘이 생성됩니다. 위 아이콘을 눌러 실행을하면 아래와같은 화면이 뜨고 주소창에 주소를 입력하시면 모바일기기기와 pc화면이 분리되어 있는 화면을 확인하실 수 있습니다. 좌측의 휴대폰기종을 선택하여 디바이스를 변경할 수 있으며 변경시에는 ctrl-r을 이용하거나 새로고침을하여 적용을 시켜줘야 하는점이 좀 번거로울수도 있습니다. 실제 휴대폰을 들고 확인해본바 글꼴랜더링 이외에는 모든부분이 ..