 |
|
앞서 셋팅한 이클립스에서 먼저 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 β</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>
'프로그래밍 Programming' 카테고리의 다른 글
| Tokyo Tyrant - 1. Tokyo Cabinet 설치하기 (0) | 2012.10.27 |
|---|---|
| JQTouch - 메뉴 생성, 링크 걸기 (0) | 2012.10.27 |
| 이클립스 사용시 한글이 깨져나올 때/한글 폰트 크기가 작을 때 (0) | 2012.10.19 |
| JQTouch 사용준비 / 데모실행 (0) | 2012.09.22 |
| 이클립스 원격작업 Target Management (RSE) (0) | 2012.09.19 |