Blog Content

HTML5 공부를 하기 위한 개발툴이 설치가 완료 되었으면 이제 프로그램의 가장 기본인 Hello 를 보여주기 위한 작업을 하겠습니다. 작업을 하면서 HTML5에서 필요한 설정등을 하도록 하겠습니다. 프로젝트 구성을 시작 하겠습니다. 추후에 계속해서 페이지를 추가 하다보면 나중에 관리하기 힘드니깐 각자 편한 방법으로 해줍니다. 제가 구성한 프로젝트 입니다. 아래 '더 보기'를 클릭하세요. 기본 프로젝트 구성하기 파일 -> 새프로젝트를 실행합니다. 템플릿 -> 기타 프로젝트 형식 -> Visual Studio 솔루션 -> 빈 솔류션을 만들어주세요. 왜 이렇게 해야하는지는 마지막에... 위에 빈 솔루션을 만들면 화면 오른쪽 솔루션 탐색기에 보시면 프로젝트가 생성되었습니다. 프로젝트를 선택하시고 마우스 오른쪽..

HTML5 환경설정하기 개발툴 : Visual Studio 2013 Express Web 툴 설치하기 (무료) (Visual Studio 2010 에서 인텔리센스를 따로 설치해야하지만 2013버전에서는 그럴 필요가 없음) 가상 시뮬레이터 - 아이폰 가상 시뮬레이터: iBBDemo 설치 - 안드로이드 : Android Virtual Device 설치 교재 : 스마트폰 앱 개발을 위한 HTML5 ----- 공부를 하면서 따로 설치한 내용은 계속애서 추가 하겠습니다.

http://www.w3.org/1999/xhtml">

제대로 jQuery Mobile 이 동작하는지 테스트 하겠습니다. 전체 소스 입니다. 첫 화면 안녕하세요~! 같이 공부해요. http://godffs.tistory.com 결과화면입니다. 끝~

이클립스는 안드로이드 공부할때 말고는 사용해본적이 없어서... 강좌를 쓰려고 공부를 하긴 했는데 제대로 한건지도 잘 모르겠습니다...;; 이클립스에서 Dynamic Web Prject 생성해서 jQuery Mobile를 사용하는 강좌를 작성합니다. 개발 운영체제 : 윈도우7 64bit 설치 파일 : Eclipse IDE for Java EE Developers, Java SE Development Kit, Apache Tomcat 6.0 프로젝트를 추가 합니다. 이제 프로젝트에 html 페이지를 추가합니다. 간단하게 html 페이지에 문구를 작성하고~ 톰켓 서버를 추가합니다. 선택을 하게 되면 아래에 Servers 탭이 추가 됩니다. 그럼 계속해서 서버 추가합니다. new server wizard 클릭하..

이제까지 작성한 예제로 웹을 구성하고 모바일로 실제 접속을 하니 UI 와 글씨등 모든게 작아보여집니다. viewport 뷰포트를 설정해주시면 됩니다. viewport는 화면에 보여지는 것들에 대해서 표현되는 영역을 말하고 있는데요. 화면의 넓이, 줌 레벨, 스케일기능등을 설정 할 수 있습니다. 보통의 viewport 설정은 하는데요. 포털 사이트에서 개발된 모바일 웹사이트에 viewport 설정된 부분을 보니 모두 동일하네요. user-scalable : 확대/축소 가능여부 initial-scale : 최초 확대 비율 ex)100% -> 1.0 maximum-scale : 스케일 변경시 비율 최대값 minimum-scale : 스케일 변경시 비율 최소값 width : 가로 길이 px, 보통은 device..

항목(List)에 이미지, 아이콘을 추가하는 예제입니다. 이미지를 추가하고 싶다면... 이미지 넣기 DOCTYPE html> 이미지 항목 List_1 List_2 List_3 아이콘을 넣고 싶다면... class="ui-li-icon" 을 선언해주시면 됩니다. />List_2

리스트 안에 리스트를 표현하는 예제입니다. 중첩 리스트 DOCTYPE html> 탭(Tab) Class_A Class__A1 Class__A2 Class_B Class__B1 Class__B2

리스트 항목을 만들어주는 태그를 입력하고 태그 안에 태그를 넣어주면 간단하게 탭 항목을 만들수 있습니다. 탭(Tab) 만들기 DOCTYPE html> 탭(Tab) A 항목 B 항목 C 항목 탭 항목이 너무 붙어있는데요. 공간을 줘서 띄어주는 방법은 data-inset="true" 를 추가 해주시면 됩니다. A 항목 B 항목 C 항목

리스트로 보여주는 예제입니다. 많이 사용되되는 UI 입니다. 목록(List) DOCTYPE html> 리스트 리스트1 리스트2 리스트3 리스트를 표현 할 때 앞에 숫자를 넣고 싶다면... 리스트1 리스트2 리스트3

Header, footer 바가 고정된 상태에서 page영역을 전체 보기로 설정됩니다. 사진이나 동영상를 보는 화면에서 사용되는 기능입니다. 화면을 클릭(터치)해주세요. 전체 화면보기 DOCTYPE html> jQuery Mobile Header footer

Header 바 - 페이지 상단 툴바로 페이지 타이틀과 페이지 네비게이션 으로 좌,우측 버튼이 많이 사용됩니다. Header 바 DOCTYPE html> jQuery Mobile Header 이전 다음 footer 바 - 페이지 하단에 위치된 툴바로 여러개의 버튼을 담을 수 있습니다. footer 바 DOCTYPE html> jQuery Mobile Header UP DOWN 기타... 네비게이션바

기본버튼과 버튼 아이콘을 사용합니다. 버튼의 종류 DOCTYPE html> jQuery Mobile Hoe 기본버튼 글짜길이만큼 길이지정 집모양 버튼 + 버튼 별모양 버튼 +위 +아래 +이미지만 버튼의 그룹으로 표시 1번 2번 3번 결과화면

버튼을 클릭시 페이지 이동하는 예제입니다. 태그를 사용해서 페이지를 이동하는데요. 보통 태그를 사용해서 페이지를 이동하게 되면 페이지가 새로고침으로 되는데요. jQuery Mobile에서는 부드럽체 페이지가 이동됩니다. 처음 열리게 되는 페이지에 jQuery Mobile 스크립트와 프레임워크 등 설정해줬는데요. HTML 태그에서 파일을 링크하게 되면 다른 페이지에서도 자동으로 통합됩니다. 첫번째 페이지 mainpage.htm DOCTYPE html> jQuery Mobile jQuery Mobile 반갑습니다. 같이 공부해요. 로그인 두번째 페이지 login_page.htm DOCTYPE html> jQuery Mobile jQuery Mobile 이전 로그인 페이지 입니다. 상단에 이전 버튼 클릭하시면..

DOCTYPE html> jQuery Mobile 첫 화면 안녕하세요~! 같이 공부해요 http://godffs.tistory.com -------------------------------------------------------------------------------- 구성화면 jQuery Mobile 구성 영역 page 안에 header, content, footer로 구성되어 있으며, data-role 석성으로 구분합니다. header, footer 는 페이지 내에서 없어도 되지만 content 는 꼭 있어야 합니다.