갈루아의 반서재

728x90


안드로이드 웹앱
국내도서>컴퓨터/인터넷
저자 : 조나단 스타크(Jonathan Stark) / 변정훈역
출판 : 한빛미디어 2011.07.29
상세보기



앞서 셋팅한 이클립스에서 먼저 index.html 파일부터 수정해보자.

JQTouch 소스를 다른 폴더(맨 하단 jqtoch_backup)에 백업해두고

메뉴, 컨텐츠 등을 하나씩 수정해서 자신의 것으로 만들어본다.



 Remote System Explorer 설정에 대해서는 http://www.jpalace.net/75 참조


1. 타이틀 바꾸기


index.html 

  <div id="home" class="current">

                <div class="toolbar">

                    <h1>JQTouch</h1>

                    <a class="button slideup" id="infoButton" href="#about">About</a>

                </div>


<h1> </h1> 사이에 있는 JQTouch 를 원하는 제목으로 바꾼다.



2. 긴 타이틀 다루기


아래와 같이 긴 타이틀에 대한 Max 값이 적절히 주어져 있지 않으면 타이틀에 몇 자 넣지 않았는데도 아래 변경전과 같이 ... 으로 나와 보기가 좋지 않다.


 변경전


변경후 

 

→   


이를 변경하기 위해서 먼저 해당 정보를 갖고 있는 파일을 찾는다.


jndex.html

<!doctype html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>jQTouch &beta;</title>

        <link rel="stylesheet" href="../../themes/css/jqtouch.css" title="jQTouch">


        <script src="../../src/lib/zepto.min.js" type="text/javascript" charset="utf-8"></script>

        <script src="../../src/jqtouch.min.js" type="text/javascript" charset="utf-8"></script>


<head> 중간 쯤에 보이는 jqtouch.css 파일을 찾는다.


jqtouch.css

}

/* line 52, ../scss/include/_skeleton.scss */

#jqt .toolbar > h1 {

  position: absolute;

  overflow: hidden; ← 엘리먼트 테두리 밖으로 나오는 내용 자르기

  left: 50%;

  bottom: 9px;

  margin: 1px 0 0 -75px;

  width: 150px;   ← 이 부분 수정      

  font-size: 20px;

  font-weight: bold;

  line-height: 1.3em;

  text-align: center;

  text-overflow: ellipsis; ← 브라우저가 전체 문자열이 표시된 것이 아님을 알려주기 위해 점 세 개를 잘려진 텍스트의 끝에 덧붙여준다

  white-space: nowrap;

  color: white;

  text-shadow: #161717 0 -1px 0;

}


아래와 같이 타이틀을 길게 넣어도 이제 어느 정도까지는 보여줌으로 보기가 한결 낫다.

index.html

  <div id="home" class="current">

                <div class="toolbar">

                    <h1>JQTouch 테스트 긴 타이틀 다루기</h1>

                    <a class="button slideup" id="infoButton" href="#about">About</a>

                </div>


안드로이드 웹앱
국내도서>컴퓨터/인터넷
저자 : 조나단 스타크(Jonathan Stark) / 변정훈역
출판 : 한빛미디어 2011.07.29
상세보기




728x90