Presentation. Mobile Web &HTML ~contents +1+1 Mobile Web, JQuery mobile +2+2 HTML5 +3+3 CSS.

Presentation on theme: "Presentation. Mobile Web &HTML ~contents +1+1 Mobile Web, JQuery mobile +2+2 HTML5 +3+3 CSS."— Presentation transcript:

1 Presentation

2 Mobile Web &HTML

3 ~contents +1+1 Mobile Web, JQuery mobile +2+2 HTML5 +3+3 CSS

4 Mobile Web

5 - 모바일웹은 위에 그림과 같이 모바일의 인터넷 기능을 통해 각종 웹사이트로 접속 할 수 있는데 그 중 모바일 환경을 고려하여 설 계된 모바일 전용 웹사이트를 의미한다. 그림과 같이 유명 포털사이트나 특정한 목적을 갖고 있는 웹사이트들이 모바일을 통해 접속 할 경우 PC 에서 보던 화면과는 다른 형태로 웹사이트를 구성하여 보여준다. 그렇다고 그들이 제공하는 컨텐츠 ( 내용이나 보여주고자 하는 것 등 ) 가 PC 에서 볼 때와 달 라지는 것은 아니지만 작은 해상도 ( 화면 ) 에 모든 내용을 포함 시킬 수 없으므로 중요하다고 판단하는 내용을 간추려 보여주는 것 이 특징이다

6 모바일 웹 검색 쿼리점유율(모바일 웹브라우저를 통해 발생한 검색쿼리만 을 의미하여, 애플리케이션에서 발생하는 검색 쿼리는 제외)을 살펴보면 네 이버 검색의 유선시장 지배력이 모바일 웹에서도 유지되는 가운데 다음 검 색과 구글검색이 2위와 3위로 쿼리점유율을 확보하고 있음 Mobile Web

7 모바일 UI 프레임워크, JQuery mobile 1. 모바일 UI 프레임워크 ● 모바일 UI프레임워크란? - 모바일 디바이스 상에서 사용자와 콘텐츠가 상호대화 할 수 있도록 개발 모듈로 제공되는 툴 ●“모바일 웹앱 = HTML5 + 모바일 UI 프레임 워크” --> 편리하게 세련된 UI를 만들 수 있다. 아이콘, 버튼, 등등 ●모바일 UI프레임워크의 특징 - 네이티브 앱과 UX가 거의 유사하게 재현함 : 개발툴로 만든 네이티브앱과 유사 - 다양한 해상도에 따라 모두 대응 - 대부분 오픈소스로 개발 : 무료로 최신 버젼을 가져다 쓸 수 있다. 2.Jquery mobile 스마트폰이나 스마트 타블릿 PC를 위한 터치 방식의 웹 프레임워크 특징 : Write less, Do more' --> 최소 작업으로 더 많은 효과를! 최신 디자인의 UX를 제공받을 수 있다. 가장 많은 숫자의 디바이스를 지원 어도비가 지대한 관심, 후원을 하고 있음. 따라서 웹앱 프레임워크 중에 가장 디자인측면에서는 미학성이 있다.

8 HTML5 란 ? HTML5 는 웹 문서를 만들기 위한 기본 프로그래밍 언어 ‘HTML(Hyper Text Markup Language)’ 의 최신규격이다. HTML5 는 엑티브 X(Active X) 를 설치하지 않아도 동일한 기능을 구현할 수 있고, 특히 플래시 (flash) 나 실버라이트 (Silverlight), 자바 FX(JAVA FX) 없이도 웹 브라우저 (web browser) 에서 화려한 그래픽 효과를 낼 수 있다. HTML5

9 header nav Section,article footer

10 ● header : 문서 도입부분이나 네비게이션을 위한 요소의 그룹을 지정사이트 전체의 머리말 또는 포스트의 머리말 … 머리말 영역 … 메뉴 영역 콘텐츠 영역 … 콘텐츠 구분 영역 … … 꼬리말 영역 HTML5 시맨틱 마크업 - header - 사이트의 머리 영역,사이트 소개나 네비게이션 등을 표시

11 ... MiniApps HTML5 apps for iPhone, iPad, Android & other mobile platforms HTML5 시맨틱 마크업 - header

12 … 머리말 영역 … 메뉴 영역 콘텐츠 영역 … 콘텐츠 구분 영역 … … 꼬리말 영역 HTML5 시맨틱 마크업 – nav - 사이트의 네비게이션 요소를 표시 ● nav : 문서 안에서, 혹은 다른 문서로 링크기 위한 내비게이션 영역을 정의. 위치에 영향을 받지 않음

13 Homepage What we do Who we are Portfolio Blog Contact HTML5 시맨틱 마크업 - nav

14 HTML5 시맨틱 마크업 – article … 머리말 영역 … 메뉴 영역 콘텐츠 영역 … 콘텐츠 구분 영역 … … 꼬리말 영역 - 뉴스 기사나 블로그 글과 같은 독립적인 콘텐츠를 표시 ● article : 독립적인 콘텐츠를 지정, 웹 상의 실제 내용. 재 배포 가능한 자료를 다룸 블로그의 포스트나 웹 사이트 내용, 코멘트 등. 댓글 표시는 article 요소를 중첩

15 Designing in the Browser 8th August 2010 For the past few revisions of this site I have designing he site in … 0 Comments Read... HTML5 시맨틱 마크업 - article 하나의 태그 안에 포함된 포스트 제목과 포스팅 날짜, 포스팅 내용

16 HTML5 시맨틱 마크업 - section 일반적인 문서나 애플리케이션 영역을 표시,h1~h6과 함께 사용 … 머리말 영역 … 메뉴 영역 콘텐츠 영역 … 콘텐츠 구분 영역 … … 꼬리말 영역 ● section : 문서의 구분을 정의, 제목을 붙여서 콘텐츠 그룹을 묶은 것.

17 HTML5 시맨틱 마크업 - section.............. aktuelle Projekte...........

18 HTML5 시맨틱 마크업 - footer 사이트 하단 영역,사이트 제작자나 관련정보,저작권 정보 등을 표시 … 머리말 영역 … 메뉴 영역 콘텐츠 영역 … 콘텐츠 구분 영역 … … 꼬리말 영역 ● footer : 섹션이나 문서의 꼬리말 정의, 저작권 정보, 사이트 제작자 정보

19 HTML5 시맨틱 마크업 - footer Copyright© 2012 All Right Reserved 요소를 이용한 하단 저작권 표시

20 HTML5 시맨틱 마크업 - aside 본문을 표시하고 남는 내용, 사이드바 요소를 이용한 왼쪽 사이드 바 Szukaj freszki Szukaj......

21 그리고 된 발표 모바 CSS일

22 CSS - CSS는 캐스캐이딩 스타일 시트(Cascading Style Sheet)의 약자 스타일 : HTML 문서에서 자주 사용되는 글꼴이나 색상, 각 요소들의 배치 등 외형을 결정 하는 요소들 예 ) 웹 문서에 태그를 적용하는 모든 텍스트를 12 픽셀 크기의 파란색으로 표시할 때 스타일 시트를 사용하지 않는다면 : 사용한 태그를 모두 찾아 일일이 수정해야 한다. 스타일 시트를 사용한다면 : 스타일 시트에서 한번만 수정하면 된다. 스타일 시트 (CSS) 란 ? 스타일 시트를 사용해야 하는 이유 웹 문서의 디자인과 내용을 분리할 수 있다. 다양한 매체에 적합한 문서를 만들 수 있다.

23 Style Sheet type 1) 내부 스타일 시트 - 스타일 시트가 간단하거나 한 문서 안에서만 사용할 경우에는 태그를 사용하여 웹 문서 안에 스타일 시트 소스를 적어준다. - 웹 문서를 가져올 때마다 스타일 시트 정보도 가져와야 하고, 여러 문서에서 사용되는 스타일을 수정해야 할 경우 각 문서마다 스타일 시트 소스를 수정해야 하기 때문에 번거롭다. 스타일 1; 스타일 2;...... body { background-image:url(images/bg4.jpg); background-repeat : repeat-x; background-attachment: fixed; } 기본형식예

24 Style Sheet type 2) 외부 스타일 시트 - 웹 사이트를 제작할 때 여러 문서에서 사용할 스타일들을 별도의 파일로 저장해 놓는 것. - 파일 확장자 *.css - 태그를 이용해 외부 스타일 시트 파일을 연결한다. 기본형식 예

25 Style Sheet type 3) @import 문 이용 - 스타일 시트를 지원하지 않는 브라우저에서 아예 스타일 시트를 참조하지 않게 하려면 @import 문을 사용한다. - @import문을 사용할 때는 태그와 함께 사용한다. @import “4.x 대 브라우저용 css 파일 " @import "style2.css" 기본형식 예

26 Style Sheet type 4) 인라인 스타일 - 일부 태그에만 스타일을 적용하려고 할 때 사용한다. - 태그의 style 속성을 이용한다. Style=“ 속성값, 속성값,..” 기본형식 바질 (Basil) 예

27 Style type – tag style 태그 스타일 : 문서 안의 특정 태그에 모두 적용된다. 태그 { 속성 : 속성값, 속성 : 속성값, …} 기본형식 주요 허브 소개 h3 {color:blue} p {font-size:12px; margin-left:20px;} 허브의 종류 바질 (Basil) 두통, 신경과민, ~ ( 중략 ) ~ 살균효과가 있다. 캐모마일 (Chamomile) 목욕제로 쓰면 ~ ( 중략 ) ~ 마시면 좋다. 레몬밤 (Lemonbalm) 레몬밤의 차는 ~ ( 중략 ) ~ 청량음료로도 좋다. 예

28 Style type – class style 클래스 스타일 : 문서 안의 특정 부분에만 적용하는 스타일.. 클래스 이름 { 속성 : 속성값 ; 속성 : 속성값 ;...} 기본형식 주요 허브 소개 p {font-size:12px;}.subtitle { color:blue; font-weight:bold;}.accent1 { margin-left:20px; color:red;} 허브의 종류 바질 (Basil) 두통, 신경과민, ~ ( 중략 ) ~ 살균효과가 있다. 캐모마일 (Chamomile) 목욕제로 쓰면 ~ ( 중략 ) ~ 마시면 좋다. 레몬밤 (Lemonbalm) 레몬밤의 차는 ~ ( 중략 ) ~ 청량음료로도 좋다. 예

29 Style type – ID style ID 스타일 : 문서에서 특정 이름(id)을 가진 부분에 적용하는 스타일 #ID { 속성 : 속성값 ; 속성 : 속성값 ;...} 기본형식 주요 허브 소개 body { background-image:url(images/bg_s.jpg); background-repeat : repeat-x; } p {font-family: 굴림 ; font-size:12px;}.subtitle { color:blue; font-weight:bold;} #green1 {color:green; font-family: 바탕 } h3#under {text-decoration:underline;} 허브의 종류 바질 (Basil) 두통, 신경과민, ~ ( 중략 ) ~ 살균효과가 있다. 캐모마일 (Chamomile) 목욕제로 쓰면 ~ ( 중략 ) ~ 마시면 좋다. 레몬밤 (Lemonbalm) 레몬밤의 차는 ~ ( 중략 ) ~ 청량음료로도 좋다. 예

30 Style 적용 단계 스타일과 우선 순위 ① 스타일을 정의할 때 !important를 넣어주면 적용 위치에 상관없이 가장 먼저 적용됩니다. ② 여러 가지 스타일 시트가 적용되었을 때 가장 마지막에 적은 스타일 시트가 우선 순위를 가집니다. ③ 해당 요소에 대한 스타일이 정의되어 있지 않다면 상속된 값을 따릅니다. 만일 상속된 값도 없을 경우에 는 브라우저의 기본 값을 따릅니다. ④ ID 스타일 > 클래스 스타일 > 태그 스타일의 순서를 따릅니다. p {font-family: 굴림 ; font-size:12px;}.subtitle { color:blue; font-weight:bold;} 예 스타일 정의 부분 캐모마일 (Chamomile) 스타일 적용 부분

31 Style 적용 단계

32 End 의 발표