코딩 이야기

[2022-2] 모바일앱프로젝트(캡스톤디자인) - 220926 본문

University Study/모바일앱프로젝트(캡스톤디자인)

[2022-2] 모바일앱프로젝트(캡스톤디자인) - 220926

always7767 2022. 9. 26. 13:46

1) 참고 사이트 
-  netlify | https://heropy.blog/2018/01/10/netlify/
- 마크다운 | https://gist.github.com/ihoneymon/652be052a0727ad59601
- CSS ZenGarden | http://www.csszengarden.com/
- emmet cheat | https://docs.emmet.io/cheat-sheet/
- mdn css | https://developer.mozilla.org/ko/docs/Web/CSS
- CSS 게임 | https://ambler.kr/css

2) CSS (Cascading Style Sheet) 
- HTML 문서에 적용하는 표준 스타일시트
- W3C 웹 컨소시엄에서 개발한 스타일시트 언어로 1996년 CSS1, 1998년 CSS2, 2007년 CSS2.1, 현재는 CSS3가 개발 중임
- 기존의 스타일시트 개념을 웹에 적용한 것

3) CSS3 스타일 선언 형식
① 선택자(selector)
- 스타일을 적용할 대상을 지정
- 특정 태그 영역만 원하는 스타일 또는 특별한 기능(제이쿼리 사용)을 적용

4) 뷰포트(viewport)
- 보여지는 창문이란 뜻으로 보통 '화면 요소가 보여지는 영역'을 말함
- 각 장치의 뷰포트 적용 방식에 따라 같은 HTML5 문서가 실행 장치에 따라 다르게 보임

5) 레이아웃 뷰포트(layout viewport)
- 장치의 전체 화면 해상도에 해당하는 영역

6) 웹앱(webapp)
- '모바일 웹 애플리케이션'의 줄임말
- 모바일 웹처럼 다양한 모바일 장치로의 배포와 개발이 쉬운 이점

7) CDN 방식
- HTML 문서의 <head> 엘리먼트 영역 안에 <link>와 <script> 태그의 속성으로 URL 주소를 추가

8) 다운로드 방식
- HTML 문서의 <head> 엘리먼트 영역 안에 <link>와 <script> 태그의 속성으로 jQuery를 추가
- 속도 빠름
- 앱의 무게는 무거움

9) 제이쿼리 모바일 페이지 구조
- 페이지 : 브라우저에 보여지는 전체 화면 영역 (data-role="page") / 헤더, 콘텐츠, 푸터를 포함하는 컨테이너 역할
- 헤더 : 페이지 상단의 툴바 영역 (data-role="header")
- 콘텐츠 : 페이지 중앙의 실제 페이지 내용이 표시되는 영역 (data-role="content")
- 푸터 : 페이지 하단의 툴바 영역 (data-role="footer")

10) 외부 페이지의 내부 링크 방식
- 기본적으로 하나의 HTML 문서는 하나의 DOM 트리를 구성
- 제이쿼리 모바일은 내부(도메인) 링크 방식으로 연결하면 DOM 트리를 새롭게 생성하지 않고 대신 연결된 외부 페이지를 현재의 DOM 트리에 추가함
- DOM 트리에서 중복되는 엘리먼트 노드는 제거됨
- 물리적으로 다른 파일 안에 있더라도 내부 링크 방식으로 연결된 페이지들은 하나의 DOM 트리를 구성하기 때문에 Ajax에 의해 자연스러운 화면 전환 
  애니메이션 적용 가능

11) 외부 페이지의 외부 링크 방식
- 외부 페이지를 링크를 통해 연결할 때 Ajax를 사용하지 않는 방식
- 고전적인 링크 방식, 풀페이지(full-page) 링크 방식
- 외부 페이지를 내부 링크 방식으로 연결하면 기존 HTML 파일 안의 (CSS3와 자바스크립트) 코드가 연결된 페이지에 영향(모바일 페이지의 스타일이
   나 기능이 페이지 링크 방식에 의해 깨지거나 다르게 동작)을 미침

** 기타 **
data-add-back-btn="true" 는 바로 이전 페이지로 이동함.
ui-btn-right : 오른쪽에 버튼 생성
ui-btn-left : 왼쪽에 버튼 생성

저작자표시 비영리 변경금지

'University Study > 모바일앱프로젝트(캡스톤디자인)' 카테고리의 다른 글

[2022-2] 모바일앱프로젝트 - 221107  (0) 2022.11.07
[2022-2] 모바일앱프로젝트(캡스톤프로젝트) - 221024  (0) 2022.10.24
[2022-2] 모바일앱프로젝트 (캡스톤디자인) - 220919  (0) 2022.09.19
[2022-2] 모바일앱프로젝트(캡스톤디자인) - 220913  (0) 2022.09.13
'University Study/모바일앱프로젝트(캡스톤디자인)' Related Articles more
Comments