이클립스 마켓에 GWT 입력 HTML 5 툴 다운로드 받기
12-1 툴바 기본 사용법 익히기
inline(인라인) 모드 사용하기
JQuery Mobile을 이용하면 툴바(Toolbar)를 손쉽게 사용할 수 있습니다. Header 와 Footer 영역에 data-role을 ‘navbar’ 라고 입력하면 됩니다. Header 영역에 입력하면 상단에 생기고 Footer 영역에 입력하면 하단에 생기는 차이만 있습니다. 그리고 ul 엘리먼트를 사용해서 li 엘리먼트에 링크만 걸어주면 됩니다.
<div data-role="header">
<div data-role="navbar">
<ul>
<li><a href="#" >상단1</a></li>
<li><a href="#" >상단2</a></li>
<li><a href="#" >상단3</a></li>
<li><a href="#" >상단4</a></li>
<li><a href="#" >상단5</a></li>
</ul>
</div> <!-- navbar 끝 -->
</div>
위 예는 Header 영역에 data-role =“navbar”를 사용해서 상단에 툴바를 만든 모습입니다. 이때 툴바의 단추 중에 포커스를 주고 싶은 것이 있으면 li 엘리먼트의 특성에
class=“ui-btn-active”를 기입하면 다른 색상으로 표시됩니다.
->첫번째만 적용하면 자동적으로 다 적용 된다.
이렇게 해서 만든 툴바는 기본적으로 “inline(인라인)” 포지션 모드의 특성을 가집니다. inline(인라인) 포지션 모드란 화면을 스크롤하면 다른 내용들과 함께 이동되는 것을 말합니다. 마치 글자나 이미지와 함께 같은 엘리먼트 취급을 받는 것입니다.
Fixed(고정) 포지션 모드 사용하기
하지만 대부분의 툴바는 스크롤해도 자기 자리를 지키고 있어야 합니다. 그렇게 해주기 위해서는 특성 Fixed(고정) 포지션 모드로 바꿔 주어야 합니다. ‘Fixed(고정)’ 포지션 모드는 사용자가 화면을 스크롤시키면 잠시 동안 화면에서 사라지지만 스크롤이 멈추면 다시 원래 위치에 표시됩니다.
<div data-role=“header” data-position=“fixed”>
Header 영역에 data-position=“fixed” 특성을 부여하여 상단에 사용한 툴바가 Fixed(고정) 포지션 모드가 되도록 합니다.
그 뿐만 아니라 스마트폰이나 태블릿 PC에서 사진을 터치하면 툴바나 메뉴들이 사라지고 다시 한 번 터치하면 나타납니다.
Fixed (고정) 포지션 모드를 사용하면 터치하여 사진만 화면에 표시했다가 다시 터치하여 메뉴와 툴바들을 화면에 나타나게 할 수 있습니다. 하지만 이 기능을 사용해 보면 배경그림이 화면에 완벽하게 가득 채워지지 않습니다. 그 이유는 콘텐츠가 inline(인라인) 포지션 모드 그대로 있기 때문입니다. 만약 배경도 함께 가득 차게 나타나게 하고 싶다면 이어서 소개하는
FullScreen(풀스크린) 포지션 모드를 추가해 주어야 합니다.
FullScreen(풀스크린) 포지션 모드 사용하기
FullScreen(풀스트린) 포지션 모드를 사용하면 배경의 내용도 화면 가득 나타나게 됩니다. 일반적으로 FullScreen(풀스크린) 포지션 모드는 Fixed(고정) 포지션 모드와 함께 사용해서 사진뷰어의 경우처럼 툴바에 의해 가려져 있는 배경을 자세히 보고 싶을 때 사용합니다.
사용하는 방법은 Header 영역이나 Footer 영역에 한번만 data-fullscreen=“true”를 기입해 주면 이 모드가 작동합니다.
<div data-role=“header” data-position=“fixed” data-fullscreen=“true” >
또는
<div data-role=“footer” data-position=“fixed” data-fullscreen=“true” >
data-fullscreen=“true” 이 기입된 툴바는 투명해져서 배경이 비쳐 보이므로 불투명하게 하고 싶은 경우 기입해 주지 않으면 됩니다. 하지만 header 와 footer 두 영역 중 한 곳은 기입해 주어야 하므로 한쪽은 반드시 투명해 져야 합니다.
지금까지 설명한 FullScreen (풀스크린) 포지션 모드에 대하여 사용방법을 정리해 보겠습니다. 먼저 배경 이미지를 꽉 채워 표시하고 싶다면 Header 나 Footer 에 data-fullscreen=“true”를 지정해 줍니다. 그리고 data-fullscreen=“true”를 지정한 Header나 Footer 의 툴바는 반투명으로 표시된다는 것을 기억하세요.
툴바에 아이콘 삽입하기
툴바에 단추 제목만 있는 경우보다는 예쁜 아이콘이 함께 더욱 세련된 디자인을 연출 할 수 있습니다. 방법은 간단한데 JQuery Mobile에서 제공하는 단추 아이콘을 a 엘리먼트의 특성에 넣어주면 됩니다.
<li><a href="#" data-icon="grid">하단1</a></li>
http://api.jquerymobile.com/icons/
Back 단추화 HOME 단추 만들기
아이콘을 사용하는 또 다른 응용 방법도 있습니다. 서브 페이지에서 메인 페이지로 돌아갈 때 사용하는 [Back] 단추에 아이콘을 넣어주면 사용자가 직관적으로 선택할 수 있으므로 UI 디자인에 도움이 됩니다.
<a href=“#” data-icon=“back”>Back</a>
또한 [Home] 단추의 경우 글자는 없애고 집 모양의 아이콘만 남기고 싶을 때가 있습니다. a 엘리먼트에 data-iconpos=“notext”를 넣으면 됩니다.
<a href=“#” data-icon=“home” data-iconpos=“notext” data-theme=“b”>
12-2 Fo torama 사용법 익히기
포토라마 가 좋은 점은 모든 브라우저에 최적화되어 있기 때문에 데스크탑 PC뿐만 아니라 아이폰이나 안드로이드폰에서도 동작합니다. 스마트폰이나 태블릿 PC를 사용하다가 가로혹은 세로로 자유롭게 방향을 바꾸면 그것을 알아채서 가로 모드 혹은 세로 모드에 적합하게 보여줍니다.
내려받기
압축을 풀면 example.html 파일은 응용한 예제가 들어 있으므로 꼭 열어서 실행해 보도록하세요. 그리고 fotorama.png , 2가지 파일은 fotorama.js 와 fotorama.css 파일과
항상 같은 폴더에 위치해야 합니다.
사용방법
1단계 : JQuery 준비하기
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
2단계 : 포토라마 파일 준비하기
<link href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet"> <!-- 3 KB -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script> <!-- 16 KB -->
또는
<link href="fotorama/fotorama.css" rel="stylesheet"> <!-- 3 KB -->
<script src="fotorama/fotorama.js"></script> <!-- 16 KB -->
3단계 : 이미지 연결 및 사용법 설정하기
포토라마의 가장 큰 장점은 사용이 쉽다는 것입니다. 갤러리에 표시할 이미지를 <img> 태그로 표시하고 <div> 로 감싼 후에 클래스 선택자로 class=“fotorama" 만 지정하면 됩니다.
이때 data-caption의 특성에 캡션으로 사용할 제목을 적어 줍니다.
<div class="fotorama">
<img src=“pic/full/cb01.jpg" data-catption=“호수공원” />
<img src="pic/full/cb02.jpg" data-caption=“자유관“>
</div>
만약 썸네일 이미지를 준비할 수 있다면 처음 이미지 로딩 속도를 절약하기 위해서 원본이미지와 구분하여 다음처럼 사용할 수 도 있습니다. 즉, 원본 이미진,s <a> 태그에 썸네일 이미지는 <img> 태그에 적습니다.
<div class="fotorama" >
<a href="pic/full/cb01.jpg"><img src="pic/thumb/cb01.jpg" data-caption="호수공원" /></a>
<a href="pic/full/cb02.jpg"> <img src="pic/thumb/cb02.jpg" data-caption="자유관" /></a>
</div>
</div>
아무런 옵션 없이 위의 내용만으로도 충분히 잘 화면에 나타납니다. 더불어서 포토라마는 다양한 옵션을 제공하므로 다음처럼 원하는 기능에 맞춰서 <div> 태그에 특성으로 기입만 해주면 됩니다.
<div class="fotorama" data-arrows="true" data-width="100%" data-ratio="965/643" data-allowfullscreen="true" data-nav="thumbs" >
각 특성에 대한 의미와 사용법을 정리하면 다음과 같습니다.
표
| 옵션 | 의미 | 사례 |
| data-arrows | 마우스 커서를 가져가면 좌우 이동 화살표나 전체 화면으로 전환할 화살표를 표시할지 지정합니다. | data-arrows="true" |
| data-width | 표시할 이미지의 너비값을 지정합니다. 브라우저 너비를 가변적으로 할 땐느 100% 로 지정하고 가로와 세로의 크기를 고정적으로 지정할 때는 data-width="480" data-height="320" 처럼 함께 지정합니다. | data-width="100%" |
| data-ratio | 첫 이미지의 가로, 세로 비율을 이미지의 너비/높이(픽셀) 로 지정합니다. 그러면 다음 이미지도 이 비율로 표시합니다. | data-ratio="965/643" |
| data-allowfullscreen | 전체화면으로 표시할지 여부를 지정합니다. | data-allowfullscreen="true" |
| data-nav | 화면에 썸네일 이미지를 표시할지 여부를 결정합니다. 지정하지 않으면 썸네일 이미지가 나타나지 않습니다. | data-nav="thumbs" |
그리고 포토로마를 유튜브 동영상을 연결하는 용도로도 사용할 수 있습니다. 예를 들어 다음처럼 <a> 태그에 유튜브 동영상의 주소를 적어주면 포토로마 안에 포함시켜 표시할 수 있습니다.
<div class="fotorama">
<a href="http://youtu.be/gc-SkeQ3Bng">최고의 가치 비디오</a>
</div>
4 단계 : 기타 사용법 익히기
포토라마의 캡션은 기본값이 좌측 하단에 표시됩니다. 만약 캡션을 가운데 배치하고 싶다면
fotoram_caption 의 클래스 선택자를 가운데 정렬시키면 됩니다.
<style>
.fotorama__caption {
text-align: center;
}
</style>
Fotorama 적용해 보기
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>버추얼대학교</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- JQM 설정 -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<!-- fotorama 설정 추가 -->
<link href="fotorama/fotorama.css" rel="stylesheet">
<script src="fotorama/fotorama.js"></script>
<style>
.fotorama__caption {
text-align: center;
}
</style>
</head>
<body>
<div data-role="page" id="campus_images" >
<div data-role="header">
<h1>캠퍼스 이미지</h1>
</div><!-- header 끝 -->
<div data-role="content" >
<div class="fotorama" data-arrows="true" data-width="100%" data-ratio="965/643" data-allowfullscreen="true" data-nav="thumbs" >
<img src="pic/cb01.jpg" data-caption="호수공원" />
<img src="pic/cb02.jpg" data-caption="자유관" />
<img src="pic/cb03.jpg" data-caption="성실관" />
<img src="pic/cb04.jpg" data-caption="학생회관" />
<img src="pic/cb05.jpg" data-caption="자유관 앞 조형물" />
<img src="pic/cb06.jpg" data-caption="본관" />
<img src="pic/cb07.jpg" data-caption="채플관" />
<a href="http://youtu.be/gc-SkeQ3Bng">최고의 가치 비디오</a>
</div>
</div>
<div data-role="footer">
<h2>버추얼 대학교</h2>
</div>
</div>
</body>
</html>
결과 =>
http://braverokmc2.dothome.co.kr/junho/ex12/campus_images.html
댓글 ( 4)
댓글 남기기